@fikar-ai/design 1.5.0

package/fonts.css

@@ -0,0 +1,37 @@
+/* @fikar-ai/design — Charter (serif) self-hosted @font-face.
+   Charter by Matthew Carter / Bitstream, redistributed by Matthew Butterick
+   (practicaltypography.com/charter.html). License: ./fonts/Charter-license.txt.
+   BITSTREAM CHARTER is a registered trademark of Bitstream Inc.
+
+   Import once per surface (e.g. in your global stylesheet) to enable the `serif`
+   family (`font-serif` in Tailwind apps via the @fikar-ai/design preset).
+   Inter + JetBrains Mono are loaded separately (Google Fonts) and stay the UI/mono faces. */
+
+@font-face {
+  font-family: 'Charter';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./fonts/charter_regular.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Charter';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./fonts/charter_italic.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Charter';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('./fonts/charter_bold.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Charter';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url('./fonts/charter_bold_italic.woff2') format('woff2');
+}

package/logo.css

@@ -0,0 +1,24 @@
+/* @fikar-ai/design — Fikar logomark, theme-aware swap (framework-agnostic).
+   The mark is the open "C" arc + three trailing dots in the brand gradient.
+   Render BOTH variants and let the cascade show the right one:
+     <img class="fk-logo fk-logo--light" src=".../fikar-logo.svg" alt="Fikar">
+     <img class="fk-logo fk-logo--dark"  src=".../fikar-logo-reversed.svg" alt="" aria-hidden>
+   Tailwind apps can skip this file and use `block dark:hidden` / `hidden dark:block` instead.
+   Dark is keyed on `.dark` (Tailwind class strategy). For Docusaurus, alias to [data-theme='dark']. */
+
+.fk-logo {
+  display: block;
+  width: auto;
+  height: 1.25rem; /* default in-chrome height; override per use */
+}
+.fk-logo--dark {
+  display: none;
+}
+.dark .fk-logo--light,
+[data-theme='dark'] .fk-logo--light {
+  display: none;
+}
+.dark .fk-logo--dark,
+[data-theme='dark'] .fk-logo--dark {
+  display: block;
+}

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@fikar-ai/design",
+  "version": "1.5.0",
+  "description": "Fikar Ink design language — tokens, Tailwind preset + component layer. Single source of truth across all Fikar surfaces.",
+  "type": "module",
+  "license": "UNLICENSED",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Kapture-AI/fikar-design.git"
+  },
+  "exports": {
+    "./tokens.css": "./tokens.css",
+    "./components.css": "./components.css",
+    "./logo.css": "./logo.css",
+    "./fonts.css": "./fonts.css",
+    "./brand/*": "./brand/*",
+    "./fonts/*": "./fonts/*",
+    "./recipes/*": "./recipes/*",
+    "./shell.js": "./shell.js",
+    "./templates/*": "./templates/*",
+    "./preset": {
+      "types": "./preset.d.ts",
+      "default": "./preset.js"
+    }
+  },
+  "files": [
+    "tokens.css",
+    "components.css",
+    "logo.css",
+    "fonts.css",
+    "brand/",
+    "fonts/",
+    "recipes/shell.html",
+    "recipes/shell-no-sidebar.html",
+    "recipes/launcher.html",
+    "recipes/user-menu.html",
+    "recipes/theme-menu.html",
+    "recipes/brand-loader.html",
+    "recipes/empty-state.html",
+    "recipes/entity-badge.html",
+    "recipes/search.html",
+    "recipes/search-results.html",
+    "recipes/filter-chip.html",
+    "recipes/segmented.html",
+    "recipes/detail-panel.html",
+    "recipes/list-row.html",
+    "recipes/status-badge.html",
+    "recipes/time.html",
+    "shell.js",
+    "templates/",
+    "preset.js",
+    "preset.d.ts",
+    "README.md"
+  ],
+  "scripts": {
+    "test": "node --test"
+  },
+  "keywords": [
+    "fikar",
+    "design-tokens",
+    "tailwind-preset",
+    "ink"
+  ]
+}

package/preset.d.ts

@@ -0,0 +1,5 @@
+import type { Config } from 'tailwindcss';
+
+/** Ink Tailwind preset. Use as `presets: [fikarPreset]`. */
+declare const fikarPreset: Partial<Config>;
+export default fikarPreset;

package/preset.js

@@ -0,0 +1,67 @@
+/**
+ * @fikar-ai/design — Tailwind preset (Ink).
+ * Consume in tailwind.config.{ts,js}:  presets: [fikarPreset]
+ * Then delete the app's own colors / fontFamily / borderRadius / keyframes — they live here now.
+ * Pair with `import "@fikar-ai/design/tokens.css"` in your global stylesheet for the CSS vars.
+ * Keep `plugins: [tailwindcssAnimate]` in the app; this preset is pure data, no plugins.
+ *
+ * @type {Partial<import('tailwindcss').Config>}
+ */
+const fikarPreset = {
+  darkMode: ['class'],
+  theme: {
+    extend: {
+      fontFamily: {
+        // UI chrome (buttons, labels, tables, controls) — the default.
+        sans: ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
+        // Headings + body prose (reading surfaces). Needs `@import "@fikar-ai/design/fonts.css"`.
+        serif: ['Charter', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman', 'serif'],
+        // Numerals, IDs, code, numeric tables.
+        mono: ['JetBrains Mono', 'ui-monospace', 'SFMono-Regular', 'Menlo', 'monospace'],
+      },
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: { DEFAULT: 'hsl(var(--primary))', foreground: 'hsl(var(--primary-foreground))' },
+        secondary: { DEFAULT: 'hsl(var(--secondary))', foreground: 'hsl(var(--secondary-foreground))' },
+        destructive: { DEFAULT: 'hsl(var(--destructive))', foreground: 'hsl(var(--destructive-foreground))' },
+        muted: { DEFAULT: 'hsl(var(--muted))', foreground: 'hsl(var(--muted-foreground))' },
+        accent: { DEFAULT: 'hsl(var(--accent))', foreground: 'hsl(var(--accent-foreground))' },
+        popover: { DEFAULT: 'hsl(var(--popover))', foreground: 'hsl(var(--popover-foreground))' },
+        card: { DEFAULT: 'hsl(var(--card))', foreground: 'hsl(var(--card-foreground))' },
+        success: { DEFAULT: 'hsl(var(--success))', foreground: 'hsl(var(--success-foreground))' },
+        warning: { DEFAULT: 'hsl(var(--warning))', foreground: 'hsl(var(--warning-foreground))' },
+        info: { DEFAULT: 'hsl(var(--info))', foreground: 'hsl(var(--info-foreground))' },
+        // data-viz ramp (recharts etc.)
+        chart: {
+          1: 'hsl(var(--fk-chart1))',
+          2: 'hsl(var(--fk-chart2))',
+          3: 'hsl(var(--fk-chart3))',
+          4: 'hsl(var(--fk-chart4))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        'accordion-down': { from: { height: '0' }, to: { height: 'var(--radix-accordion-content-height)' } },
+        'accordion-up': { from: { height: 'var(--radix-accordion-content-height)' }, to: { height: '0' } },
+        shimmer: { '100%': { transform: 'translateX(100%)' } },
+        'fade-in': { '0%': { opacity: '0', transform: 'translateY(4px)' }, '100%': { opacity: '1', transform: 'translateY(0)' } },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+        shimmer: 'shimmer 2s infinite',
+        'fade-in': 'fade-in 200ms ease-out',
+      },
+    },
+  },
+};
+
+export default fikarPreset;

package/recipes/brand-loader.html

@@ -0,0 +1,4 @@
+<!-- Size modifiers: xs, sm, lg. Paste the <svg> from brand/fikar-loader.svg where marked. -->
+<span class="fikar-loader" role="status" aria-label="Loading">
+  <!-- inline the <svg> from @fikar-ai/design/brand/fikar-loader.svg here -->
+</span>

package/recipes/detail-panel.html

@@ -0,0 +1,35 @@
+<!-- Detail panel: the surface that describes one thing, such as a node in a graph or a source in an answer. A close button, a type line (a dot in the
+     entity colour and the type in words), a serif title, a description, then sections. Each section is a .detail-heading and rows, or chips.
+     A row is a block with its text and a .detail-row-meta at the right. When the whole row is the target it is an <a> or a <button> with the same classes (the
+     first row below), and when only a word in it is, that word is an <a> inside (the last section). A chip is a <span>, an <a> or a <button>.
+     .detail-dot-person, -organization, -event and -geo are the --entity-* roles, and a dot with none of them is muted. The panel is 340px wide and never
+     wider than its container, and fills it below 768px. The page places it (position, offsets, height). The title names the panel through aria-labelledby, so
+     its id is the page's and unique. Charter loads only on a page that imports fonts.css. -->
+<aside class="detail-panel" aria-labelledby="detail-title">
+  <button class="detail-close" type="button" aria-label="Close">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M18 6 6 18M6 6l12 12"/>
+    </svg>
+  </button>
+  <p class="detail-type"><i class="detail-dot detail-dot-person" aria-hidden="true"></i>Person</p>
+  <h2 class="detail-title" id="detail-title">John</h2>
+  <p class="detail-desc">Prospect at Waterfield evaluating Fikar for support-desk knowledge, personal memory and live call support.</p>
+  <section class="detail-section">
+    <h3 class="detail-heading">Strongest connections</h3>
+    <a class="detail-row" href="#"><span>Fikar</span><span class="detail-row-meta">evaluating · 57</span></a>
+    <div class="detail-row"><span>Fayaz</span><span class="detail-row-meta">discussed with · 42</span></div>
+    <div class="detail-row"><span>Rana Waqas</span><span class="detail-row-meta">asked about transcripts · 23</span></div>
+  </section>
+  <section class="detail-section">
+    <h3 class="detail-heading">Said in 2 calls</h3>
+    <div class="detail-row"><span>Waterfield demo call <span class="detail-row-meta">· 30 Sep</span></span><a href="#">Open call</a></div>
+    <div class="detail-row"><span>COO Q2 close review <span class="detail-row-meta">· 12 Sep</span></span><a href="#">Open call</a></div>
+  </section>
+  <section class="detail-section">
+    <h3 class="detail-heading">Read the words</h3>
+    <div class="detail-chips">
+      <span class="detail-chip">4 passages</span>
+      <a class="detail-chip" href="#">Ask in chat</a>
+    </div>
+  </section>
+</aside>

package/recipes/empty-state.html

@@ -0,0 +1,6 @@
+<div class="empty">
+  <span class="em-mark"><!-- inline fikar-logo-mono.svg --></span>
+  <h3>Nothing captured yet</h3>
+  <p>One line of orientation.</p>
+  <button class="btn btn-primary" type="button">One action</button>
+</div>

package/recipes/entity-badge.html

@@ -0,0 +1,6 @@
+<!-- Entity type badges: the four kinds of thing in the knowledge graph. .badge plus one of .b-person, .b-organization, .b-event, .b-geo.
+     The colours are the --entity-* roles in tokens.css, so dark needs nothing more. The label is the type in words, not the upper case name the data uses. -->
+<span class="badge b-person">Person</span>
+<span class="badge b-organization">Organization</span>
+<span class="badge b-event">Event</span>
+<span class="badge b-geo">Geo</span>

package/recipes/filter-chip.html

@@ -0,0 +1,5 @@
+<!-- Filter chips: .pill with .p-toggle on a <button>. aria-pressed is the state and the only style hook, so the page keeps it in step, "true" while the
+     filter is on. Shown off, then on. A chip changes what a list shows, so it is a toggle button and not a link or a checkbox. Put the group in a
+     wrapper that has a label (role="group" and aria-label) and lets the chips wrap. -->
+<button class="pill p-toggle" type="button" aria-pressed="false">Person</button>
+<button class="pill p-toggle" type="button" aria-pressed="true">Organization</button>

package/recipes/launcher.html

@@ -0,0 +1,24 @@
+<!-- App launcher: the grid button and a three column grid of tiles, one per app the signed-in person may open. Render nothing when the list is empty.
+     Each tile is a glyph over the app name. The glyph is picked by the app id from brand/apps/<id>.svg (chat, platform, crs, dictionary, cost-calculator,
+     super-admin, account), and an app with an id the package does not know shows the first letter of its name in the same .launcher-tile.
+     The panel needs the class launcher-apps to be a grid. Without it the rows stay a plain list, as in earlier versions. A hint is accepted by the React component and the macro, and not shown.
+     The current app has .current and aria-current="page". Items are plain links, because they leave the app.
+     This markup has no behaviour of its own. To hand it to shell.js, add data-fk-menu to the root (the shell recipes do), and remove
+     the page's own wiring first, since shell.js would otherwise handle the menu a second time. -->
+<div class="launcher">
+  <button class="launcher-btn" type="button" aria-haspopup="menu" aria-expanded="false" aria-label="Switch app">
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <circle cx="5" cy="5" r="2"/><circle cx="12" cy="5" r="2"/><circle cx="19" cy="5" r="2"/>
+      <circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/>
+      <circle cx="5" cy="19" r="2"/><circle cx="12" cy="19" r="2"/><circle cx="19" cy="19" r="2"/>
+    </svg>
+  </button>
+  <div class="launcher-panel launcher-apps" role="menu">
+    <a class="launcher-item current" role="menuitem" href="https://chat.fikar.ai" aria-current="page">
+      <span class="launcher-tile" aria-hidden="true"><svg class="app-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></span>Chat
+    </a>
+    <a class="launcher-item" role="menuitem" href="https://platform.fikar.ai">
+      <span class="launcher-tile" aria-hidden="true"><svg class="app-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="21" x2="14" y1="4" y2="4"/><line x1="10" x2="3" y1="4" y2="4"/><line x1="21" x2="12" y1="12" y2="12"/><line x1="8" x2="3" y1="12" y2="12"/><line x1="21" x2="16" y1="20" y2="20"/><line x1="12" x2="3" y1="20" y2="20"/><line x1="14" x2="14" y1="2" y2="6"/><line x1="8" x2="8" y1="10" y2="14"/><line x1="16" x2="16" y1="18" y2="22"/></svg></span>Platform
+    </a>
+  </div>
+</div>

package/recipes/list-row.html

@@ -0,0 +1,21 @@
+<!-- List rows grouped by day: a .day-sep label, then the rows under it. A row is a 13px title and a 12px muted line, both cut with an ellipsis, on an <a> when it
+     goes to an address or a <button type="button"> when it selects. The row the page is on has aria-current, "page" on a link and "true" on a button, and that
+     is the only thing that draws it (the first row below is the current one, and its line has a time in it, see time.html). The separator is an <h3>, one
+     level under the heading of the list, and the page decides the groups and their words. The list is a plain block, so a page can put it in a scroll area. -->
+<div>
+  <h3 class="day-sep">Today</h3>
+  <a class="list-row" href="#" aria-current="page">
+    <span class="list-row-title">Waterfield demo call</span>
+    <span class="list-row-meta"><time class="fk-time" datetime="2026-09-30T08:16:00Z" title="30 Sep, 08:16">4 h ago</time> · 119 entities</span>
+  </a>
+  <h3 class="day-sep">22 Sep</h3>
+  <button class="list-row" type="button">
+    <span class="list-row-title">Daily catchup, Fayaz and Rana</span>
+    <span class="list-row-meta">86 s · 5 entities</span>
+  </button>
+  <h3 class="day-sep">12 Sep · imported</h3>
+  <a class="list-row" href="#">
+    <span class="list-row-title">September operating checkpoint</span>
+    <span class="list-row-meta">MS Teams · 22 entities</span>
+  </a>
+</div>

package/recipes/search-results.html

@@ -0,0 +1,43 @@
+<!-- Search results: a search box with its listbox open under it, then the same listbox with nothing to show.
+     The listbox is a .launcher-panel, so .search (already positioned) is its parent, and the page shows or hides it with `hidden` and keeps
+     aria-expanded on the input in step. Focus stays in the input. The row the page makes active is the one named by aria-activedescendant, and it also has
+     aria-selected="true", which is what draws it. The other rows have aria-selected="false". A row is the item's title, an optional entity badge
+     and count, and an optional one line description. The row ids are the page's, and unique on the page.
+     Below the box: the empty state is one disabled option inside the listbox, so the list stays valid. It is never the active row.
+     shell.js does not drive this list. Arrow keys, Enter and Escape are the page's, and @fikar-ai/design-react does them in SearchResults. -->
+<div class="search search-bar">
+  <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>
+  </svg>
+  <input class="inp" type="search" value="a" placeholder="Search" aria-label="Search" autocomplete="off" data-fk-search
+    role="combobox" aria-expanded="true" aria-controls="search-results" aria-autocomplete="list" aria-activedescendant="search-result-aisha">
+  <button class="search-clear" type="button" aria-label="Clear search">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M18 6 6 18M6 6l12 12"/>
+    </svg>
+  </button>
+  <kbd class="search-kbd">/</kbd>
+  <div class="launcher-panel search-results" id="search-results" role="listbox" aria-label="Results">
+    <div class="search-row" id="search-result-aisha" role="option" aria-selected="true">
+      <span class="search-row-title">Aisha Rahman</span>
+      <span class="badge b-person">Person</span>
+      <span class="search-row-meta">12</span>
+      <span class="search-row-desc">Head of platform, owns the Q3 roadmap</span>
+    </div>
+    <div class="search-row" id="search-result-acme" role="option" aria-selected="false">
+      <span class="search-row-title">Acme Corp</span>
+      <span class="badge b-organization">Organization</span>
+      <span class="search-row-meta">8</span>
+      <span class="search-row-desc">Largest customer, renewal due in October</span>
+    </div>
+    <div class="search-row" id="search-result-planning" role="option" aria-selected="false">
+      <span class="search-row-title">Q3 planning</span>
+      <span class="badge b-event">Event</span>
+      <span class="search-row-meta">5</span>
+    </div>
+  </div>
+</div>
+
+<div class="launcher-panel search-results" id="search-results-empty" role="listbox" aria-label="Results">
+  <div class="search-empty" role="option" aria-disabled="true" aria-selected="false">No matches</div>
+</div>

package/recipes/search.html

@@ -0,0 +1,18 @@
+<!-- Search box: a leading icon, the input, a clear button and a shortcut hint. Shown at the top bar size (.search-bar), empty.
+     .search-panel in its place fills a sidebar or panel, with a smaller icon and text. Every other part is the same.
+     The input needs a placeholder: CSS shows the hint while the box is empty and the clear button once there is text, from :placeholder-shown.
+     data-fk-search registers the input with shell.js, which focuses it on / and on Cmd-K or Ctrl-K. The first one in the document wins, so leave it off
+     any second box. The hint's text is the page's and shows what it registered. shell.js also clears the box and keeps focus in it when .search-clear is
+     pressed, and sends an input event so the page hears it. The icons ship inline, with no icon library. -->
+<div class="search search-bar">
+  <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>
+  </svg>
+  <input class="inp" type="search" placeholder="Search" aria-label="Search" autocomplete="off" data-fk-search>
+  <button class="search-clear" type="button" aria-label="Clear search">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M18 6 6 18M6 6l12 12"/>
+    </svg>
+  </button>
+  <kbd class="search-kbd">/</kbd>
+</div>

package/recipes/segmented.html

@@ -0,0 +1,7 @@
+<!-- Segmented control: a two mode switch such as Find or Ask. A radiogroup of buttons with role="radio", because exactly one is chosen.
+     aria-checked is the state and the only style hook. The page sets "true" on the chosen item and "false" on the rest, and does whatever the mode means.
+     The buttons are all in the tab order and Space or Enter chooses one. Name the group with aria-label. Any number of items fits, but it is meant for two or three. -->
+<div class="segmented" role="radiogroup" aria-label="Search mode">
+  <button class="segmented-item" type="button" role="radio" aria-checked="true">Find</button>
+  <button class="segmented-item" type="button" role="radio" aria-checked="false">Ask</button>
+</div>

package/recipes/shell-no-sidebar.html

@@ -0,0 +1,60 @@
+<!-- App shell without a sidebar: a top bar and the content. Import the logos from @fikar-ai/design/brand/; the src values are placeholders.
+     The optional .shell-topbar-start goes between .brand and .cluster; leave it out when there is nothing for it. -->
+<div class="shell with-topbar no-sidebar" id="shell">
+  <header class="shell-topbar">
+    <div class="brand"><img class="logo-light" src="/brand/fikar-logo.svg" alt=""><img class="logo-dark" src="/brand/fikar-logo-reversed.svg" alt=""><span class="word">FIKAR</span></div>
+    <div class="cluster">
+      <!-- Launcher (see launcher.html, with data-fk-menu), theme menu (see theme-menu.html), then the user menu (see user-menu.html), in that order.
+           Every menu here carries data-fk-menu, so shell.js runs all three. A page must not mix these with menus it wires itself. -->
+      <div class="launcher" data-fk-menu>
+        <button class="launcher-btn" type="button" aria-haspopup="menu" aria-expanded="false" aria-label="Switch app">
+          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+            <circle cx="5" cy="5" r="2"/><circle cx="12" cy="5" r="2"/><circle cx="19" cy="5" r="2"/>
+            <circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/>
+            <circle cx="5" cy="19" r="2"/><circle cx="12" cy="19" r="2"/><circle cx="19" cy="19" r="2"/>
+          </svg>
+        </button>
+        <div class="launcher-panel launcher-apps" role="menu">
+          <a class="launcher-item current" role="menuitem" href="https://chat.fikar.ai" aria-current="page">
+            <span class="launcher-tile" aria-hidden="true"><svg class="app-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></span>Chat
+          </a>
+          <a class="launcher-item" role="menuitem" href="https://platform.fikar.ai">
+            <span class="launcher-tile" aria-hidden="true"><svg class="app-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="21" x2="14" y1="4" y2="4"/><line x1="10" x2="3" y1="4" y2="4"/><line x1="21" x2="12" y1="12" y2="12"/><line x1="8" x2="3" y1="12" y2="12"/><line x1="21" x2="16" y1="20" y2="20"/><line x1="12" x2="3" y1="20" y2="20"/><line x1="14" x2="14" y1="2" y2="6"/><line x1="8" x2="8" y1="10" y2="14"/><line x1="16" x2="16" y1="18" y2="22"/></svg></span>Platform
+          </a>
+        </div>
+      </div>
+      <div class="launcher" data-fk-menu>
+        <button class="launcher-btn theme-menu-btn" type="button" aria-haspopup="menu" aria-expanded="false" aria-label="Choose theme">
+          <svg class="theme-icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>
+          </svg>
+          <svg class="theme-icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+          </svg>
+        </button>
+        <div class="launcher-panel theme-menu-panel" role="menu" aria-label="Theme">
+          <button class="launcher-item theme-menu-item" type="button" role="menuitemradio" aria-checked="false" data-value="light">Light</button>
+          <button class="launcher-item theme-menu-item" type="button" role="menuitemradio" aria-checked="false" data-value="dark">Dark</button>
+          <button class="launcher-item theme-menu-item current" type="button" role="menuitemradio" aria-checked="true" data-value="system">System</button>
+        </div>
+      </div>
+      <div class="launcher" data-fk-menu>
+        <button class="user-menu-btn" type="button" aria-haspopup="menu" aria-expanded="false" aria-label="Open account menu" data-initials="AM">
+          <span class="avatar" aria-hidden="true">AM</span>
+        </button>
+        <div class="launcher-panel user-menu-panel" role="menu">
+          <div class="user-menu-id">
+            <span class="user-menu-name">Alex Morgan</span>
+            <span class="user-menu-email">alex@example.com</span>
+          </div>
+          <div class="user-menu-sep" role="separator"></div>
+          <a class="launcher-item user-menu-item" role="menuitem" href="/account">Account settings</a>
+          <a class="launcher-item user-menu-item" role="menuitem" href="/workspace">Workspace settings</a>
+          <div class="user-menu-sep" role="separator"></div>
+          <a class="launcher-item user-menu-item" role="menuitem" href="/logout">Sign out</a>
+        </div>
+      </div>
+    </div>
+  </header>
+  <main class="main"><div class="content">Page content</div></main>
+</div>

package/recipes/shell.html

@@ -0,0 +1,89 @@
+<!-- App shell, canonical markup. Import the logo from @fikar-ai/design/brand/; the src below is a placeholder. -->
+<div class="shell with-topbar" id="shell">
+  <aside class="sidebar" id="sidebar">
+    <div class="brand">
+      <img class="logo-light" src="/brand/fikar-logo.svg" alt="">
+      <img class="logo-dark" src="/brand/fikar-logo-reversed.svg" alt="">
+      <span class="word">FIKAR</span>
+      <button class="shell-close iconbtn" type="button" aria-label="Close navigation">&times;</button>
+    </div>
+    <nav class="side" aria-label="Main">
+      <a class="nav-item active" href="/" title="Home" aria-current="page">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 11l9-8 9 8"/><path d="M5 10v10h14V10"/></svg>
+        <span class="nav-label">Home</span>
+      </a>
+      <a class="nav-item" href="/settings" title="Settings">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/></svg>
+        <span class="nav-label">Settings</span>
+      </a>
+    </nav>
+    <div class="side-foot">
+      <span class="avatar" aria-hidden="true">AM</span>
+      <div class="meta"><b>Alex Morgan</b><br><span>Admin</span></div>
+    </div>
+    <button class="shell-collapse" type="button" aria-controls="sidebar" aria-pressed="false" title="Collapse sidebar">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg>
+      <span class="nav-label">Collapse</span>
+    </button>
+  </aside>
+  <header class="shell-topbar">
+    <button class="shell-menu" type="button" aria-label="Open navigation" aria-controls="sidebar" aria-expanded="false">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
+    </button>
+    <div class="brand"><img class="logo-light" src="/brand/fikar-logo.svg" alt=""><img class="logo-dark" src="/brand/fikar-logo-reversed.svg" alt=""><span class="word">FIKAR</span></div>
+    <div class="cluster">
+      <!-- Launcher (see launcher.html, with data-fk-menu), theme menu (see theme-menu.html), then the user menu (see user-menu.html), in that order.
+           Every menu here carries data-fk-menu, so shell.js runs all three. A page must not mix these with menus it wires itself. -->
+      <div class="launcher" data-fk-menu>
+        <button class="launcher-btn" type="button" aria-haspopup="menu" aria-expanded="false" aria-label="Switch app">
+          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+            <circle cx="5" cy="5" r="2"/><circle cx="12" cy="5" r="2"/><circle cx="19" cy="5" r="2"/>
+            <circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/>
+            <circle cx="5" cy="19" r="2"/><circle cx="12" cy="19" r="2"/><circle cx="19" cy="19" r="2"/>
+          </svg>
+        </button>
+        <div class="launcher-panel launcher-apps" role="menu">
+          <a class="launcher-item current" role="menuitem" href="https://chat.fikar.ai" aria-current="page">
+            <span class="launcher-tile" aria-hidden="true"><svg class="app-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></span>Chat
+          </a>
+          <a class="launcher-item" role="menuitem" href="https://platform.fikar.ai">
+            <span class="launcher-tile" aria-hidden="true"><svg class="app-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="21" x2="14" y1="4" y2="4"/><line x1="10" x2="3" y1="4" y2="4"/><line x1="21" x2="12" y1="12" y2="12"/><line x1="8" x2="3" y1="12" y2="12"/><line x1="21" x2="16" y1="20" y2="20"/><line x1="12" x2="3" y1="20" y2="20"/><line x1="14" x2="14" y1="2" y2="6"/><line x1="8" x2="8" y1="10" y2="14"/><line x1="16" x2="16" y1="18" y2="22"/></svg></span>Platform
+          </a>
+        </div>
+      </div>
+      <div class="launcher" data-fk-menu>
+        <button class="launcher-btn theme-menu-btn" type="button" aria-haspopup="menu" aria-expanded="false" aria-label="Choose theme">
+          <svg class="theme-icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>
+          </svg>
+          <svg class="theme-icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+          </svg>
+        </button>
+        <div class="launcher-panel theme-menu-panel" role="menu" aria-label="Theme">
+          <button class="launcher-item theme-menu-item" type="button" role="menuitemradio" aria-checked="false" data-value="light">Light</button>
+          <button class="launcher-item theme-menu-item" type="button" role="menuitemradio" aria-checked="false" data-value="dark">Dark</button>
+          <button class="launcher-item theme-menu-item current" type="button" role="menuitemradio" aria-checked="true" data-value="system">System</button>
+        </div>
+      </div>
+      <div class="launcher" data-fk-menu>
+        <button class="user-menu-btn" type="button" aria-haspopup="menu" aria-expanded="false" aria-label="Open account menu" data-initials="AM">
+          <span class="avatar" aria-hidden="true">AM</span>
+        </button>
+        <div class="launcher-panel user-menu-panel" role="menu">
+          <div class="user-menu-id">
+            <span class="user-menu-name">Alex Morgan</span>
+            <span class="user-menu-email">alex@example.com</span>
+          </div>
+          <div class="user-menu-sep" role="separator"></div>
+          <a class="launcher-item user-menu-item" role="menuitem" href="/account">Account settings</a>
+          <a class="launcher-item user-menu-item" role="menuitem" href="/workspace">Workspace settings</a>
+          <div class="user-menu-sep" role="separator"></div>
+          <a class="launcher-item user-menu-item" role="menuitem" href="/logout">Sign out</a>
+        </div>
+      </div>
+    </div>
+  </header>
+  <div class="shell-scrim" hidden></div>
+  <main class="main"><div class="content">Page content</div></main>
+</div>

package/recipes/status-badge.html

@@ -0,0 +1,10 @@
+<!-- Status badges: .badge plus one of .b-success, .b-warning, .b-destructive or .b-muted. A dot in the status colour and the status as a plain word, so a
+     surface that shows a connection, a rebuild or a job says it the same way. The word is in the text colour and only the dot takes the role colour,
+     which is what keeps the word at 4.5:1 in both themes. The dot is there to be scanned and the word carries the status, so never leave the word out.
+     The five words below are the rebuild history's, and the class is the colour: Ready is success, Rebuilding and Interrupted are warning, Failed is
+     destructive and Skipped is muted. .b-risk, .b-action and .b-incident are different badges, tinted signal types, and stay as they are. -->
+<span class="badge b-success">Ready</span>
+<span class="badge b-warning">Rebuilding</span>
+<span class="badge b-warning">Interrupted</span>
+<span class="badge b-destructive">Failed</span>
+<span class="badge b-muted">Skipped</span>

package/recipes/theme-menu.html

@@ -0,0 +1,21 @@
+<!-- Theme menu: the sun or moon button and a panel of three choices, second in the top bar cluster, after the launcher and before the user menu.
+     Shown with System chosen. The chosen row has .current and aria-checked="true", and the other two have aria-checked="false".
+     Both icons are always in the button and the CSS shows the one that matches the theme on the root (.dark or [data-theme='dark']),
+     so the right icon is there on first paint and no script decides it. The menu stores nothing. Choosing a row lets shell.js mark it, then
+     it sends a bubbling fk-theme-change event from the root with the row's data-value in detail.value, and the page applies and saves the theme.
+     data-fk-menu opts in to the behaviour in shell.js; leave it off when the page wires the menu itself. -->
+<div class="launcher" data-fk-menu>
+  <button class="launcher-btn theme-menu-btn" type="button" aria-haspopup="menu" aria-expanded="false" aria-label="Choose theme">
+    <svg class="theme-icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>
+    </svg>
+    <svg class="theme-icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+    </svg>
+  </button>
+  <div class="launcher-panel theme-menu-panel" role="menu" aria-label="Theme">
+    <button class="launcher-item theme-menu-item" type="button" role="menuitemradio" aria-checked="false" data-value="light">Light</button>
+    <button class="launcher-item theme-menu-item" type="button" role="menuitemradio" aria-checked="false" data-value="dark">Dark</button>
+    <button class="launcher-item theme-menu-item current" type="button" role="menuitemradio" aria-checked="true" data-value="system">System</button>
+  </div>
+</div>

package/recipes/time.html

@@ -0,0 +1,9 @@
+<!-- Relative time: a <time> with class fk-time. The text is the short wording, the exact time is in title so a hover shows it, and datetime is the machine
+     value. The page writes all three, and FikarShell.formatRelative(datetime) and FikarShell.formatExact(datetime) give the two texts, so every surface
+     says "just now", "12 min ago", "4 h ago" and "22 Sep, 08:16" the same way. Below, one of each, for the moment 2026-09-30T12:16:00Z read in UTC.
+     The text stays as it was written until the page writes it again (@fikar-ai/design-react's RelativeTime does that on a timer). The exact time is a title
+     attribute and not .fk-tooltip, because .fk-tooltip has no script behind it on a plain page and a title needs none. -->
+<time class="fk-time" datetime="2026-09-30T12:16:00Z" title="30 Sep, 12:16">just now</time>
+<time class="fk-time" datetime="2026-09-30T12:04:00Z" title="30 Sep, 12:04">12 min ago</time>
+<time class="fk-time" datetime="2026-09-30T08:16:00Z" title="30 Sep, 08:16">4 h ago</time>
+<time class="fk-time" datetime="2026-09-22T08:16:00Z" title="22 Sep, 08:16">22 Sep, 08:16</time>