Workspace

Persistent application environment containing tools/content.

html

<div class="ws-demo ws-demo--comfortable">
  <nav class="ws-demo__rail">☰</nav>
  <div class="ws-demo__body">
    <header class="ws-demo__topbar" style="border-bottom-color:#BFD9F2;">Design File</header>
    <div class="ws-demo__work">Persistent workspace</div>
  </div>
  <aside class="ws-demo__inspector" style="border-left-color:#BFD9F2;">Properties</aside>
</div>
<style>
.ws-demo { display: flex; height: 160px; font: 12px system-ui, sans-serif; color: #241430; border: 1px solid #24143022; }
.ws-demo__rail { flex: none; width: 40px; background: #241430; color: #FAF7F2; display: flex; align-items: flex-start; justify-content: center; padding-top: 12px; }
.ws-demo__body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ws-demo__topbar { padding: 10px 14px; border-bottom: 3px solid; background: #FAF7F2; font-weight: 700; }
.ws-demo--compact .ws-demo__topbar { padding: 5px 10px; font-size: 11px; }
.ws-demo__work { flex: 1; background: #fff; display: flex; align-items: center; justify-content: center; color: #24143066; }
.ws-demo__inspector { flex: none; width: 90px; background: #FAF7F2; border-left: 2px solid; display: flex; align-items: flex-start; justify-content: center; padding-top: 12px; color: #24143099; }
</style>

tailwind

<div class="flex h-40 font-sans text-xs text-[#241430] border border-[#24143022] ws-tw ws-tw--comfortable">
  <nav class="flex-none w-10 bg-[#241430] text-[#FAF7F2] flex items-start justify-center pt-3">☰</nav>
  <div class="flex-1 flex flex-col min-w-0">
    <header class="px-3.5 py-2.5 border-b-[3px] bg-[#FAF7F2] font-bold ws-tw__topbar" style="border-bottom-color:#BFD9F2;">Design File</header>
    <div class="flex-1 bg-white flex items-center justify-center text-[#24143066]">Persistent workspace</div>
  </div>
  <aside class="flex-none w-[90px] bg-[#FAF7F2] border-l-2 flex items-start justify-center pt-3 text-[#24143099]" style="border-left-color:#BFD9F2;">Properties</aside>
</div>
<style>
.ws-tw--compact .ws-tw__topbar { padding: 5px 10px !important; font-size: 11px; }
</style>

react

export function Workspace({
  title = "Design File",
  density = "comfortable",
  accent = "#BFD9F2",
  inspector = true,
}) {
  const compact = density === "compact";
  return (
    <div style={{ display: "flex", height: 160, fontFamily: "system-ui, sans-serif", fontSize: 12, color: "#241430", border: "1px solid #24143022" }}>
      <nav style={{ flex: "none", width: 40, background: "#241430", color: "#FAF7F2", display: "flex", alignItems: "flex-start", justifyContent: "center", paddingTop: 12 }}>☰</nav>
      <div style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0 }}>
        <header style={{ padding: compact ? "5px 10px" : "10px 14px", fontSize: compact ? 11 : 12, borderBottom: `3px solid ${accent}`, background: "#FAF7F2", fontWeight: 700 }}>{title}</header>
        <div style={{ flex: 1, background: "#fff", display: "flex", alignItems: "center", justifyContent: "center", color: "#24143066" }}>Persistent workspace</div>
      </div>
      {inspector && <aside style={{ flex: "none", width: 90, background: "#FAF7F2", borderLeft: `2px solid ${accent}`, display: "flex", alignItems: "flex-start", justifyContent: "center", paddingTop: 12, color: "#24143099" }}>Properties</aside>}
    </div>
  );
}