@open-mercato/core 0.6.7-develop.6785.1.1dd7cfac55 → 0.6.7-develop.6795.1.8a3f27921c

package/src/modules/design_system/gallery/entries/schedule.tsx

@@ -0,0 +1,307 @@
+import * as React from 'react'
+import {
+  ScheduleAgenda,
+  ScheduleGrid,
+  ScheduleToolbar,
+  ScheduleView,
+  type ScheduleItem,
+  type ScheduleRange,
+  type ScheduleViewMode,
+} from '@open-mercato/ui/backend/schedule'
+import type { GalleryEntry } from '../types'
+
+// Component titles and variant names are proper nouns from the codebase and
+// are deliberately not translated. `code` MUST contain the entry's importPath
+// (enforced by the registry-integrity test) and is always reviewed alongside
+// its sibling `render`.
+
+// Fixed sample dates (June 2026) — previews must not depend on "today" so the
+// gallery renders identically on any day.
+const weekRange: ScheduleRange = {
+  start: new Date(2026, 5, 7),
+  end: new Date(2026, 5, 13, 23, 59, 59, 999),
+}
+const monthRange: ScheduleRange = {
+  start: new Date(2026, 5, 1),
+  end: new Date(2026, 5, 30, 23, 59, 59, 999),
+}
+const boardRange: ScheduleRange = {
+  start: new Date(2026, 5, 8),
+  end: new Date(2026, 5, 10, 23, 59, 59, 999),
+}
+const emptyDayRange: ScheduleRange = {
+  start: new Date(2026, 5, 11),
+  end: new Date(2026, 5, 11, 23, 59, 59, 999),
+}
+const agendaRange: ScheduleRange = {
+  start: new Date(2026, 5, 8),
+  end: new Date(2026, 5, 9, 23, 59, 59, 999),
+}
+const draftDayRange: ScheduleRange = {
+  start: new Date(2026, 5, 12),
+  end: new Date(2026, 5, 12, 23, 59, 59, 999),
+}
+
+const sampleItems: ScheduleItem[] = [
+  {
+    id: 'availability-1',
+    kind: 'availability',
+    title: 'Open studio hours',
+    startsAt: new Date(2026, 5, 8, 9, 0),
+    endsAt: new Date(2026, 5, 8, 12, 0),
+    status: 'confirmed',
+    subjectType: 'member',
+    subjectId: 'member-1',
+  },
+  {
+    id: 'event-1',
+    kind: 'event',
+    title: 'Fitting — Anna Nowak',
+    startsAt: new Date(2026, 5, 8, 13, 0),
+    endsAt: new Date(2026, 5, 8, 14, 0),
+    status: 'negotiation',
+  },
+  {
+    id: 'event-2',
+    kind: 'event',
+    title: 'Delivery walkthrough',
+    startsAt: new Date(2026, 5, 9, 10, 0),
+    endsAt: new Date(2026, 5, 9, 11, 30),
+    status: 'confirmed',
+  },
+  {
+    id: 'exception-1',
+    kind: 'exception',
+    title: 'Studio closed',
+    startsAt: new Date(2026, 5, 10, 0, 0),
+    endsAt: new Date(2026, 5, 10, 23, 59),
+    status: 'cancelled',
+  },
+  {
+    id: 'event-3',
+    kind: 'event',
+    title: 'Quarterly review',
+    startsAt: new Date(2026, 5, 12, 15, 0),
+    endsAt: new Date(2026, 5, 12, 16, 0),
+    status: 'draft',
+  },
+]
+
+function initialRangeFor(view: ScheduleViewMode): ScheduleRange {
+  return view === 'month' ? monthRange : weekRange
+}
+
+function DemoScheduleView({ initialView }: { initialView: ScheduleViewMode }) {
+  const [view, setView] = React.useState<ScheduleViewMode>(initialView)
+  const [range, setRange] = React.useState<ScheduleRange>(initialRangeFor(initialView))
+  const [timezone, setTimezone] = React.useState('Europe/Warsaw')
+  return (
+    <ScheduleView
+      items={sampleItems}
+      view={view}
+      range={range}
+      timezone={timezone}
+      onViewChange={setView}
+      onRangeChange={setRange}
+      onTimezoneChange={setTimezone}
+      className="w-full"
+    />
+  )
+}
+
+function DemoScheduleToolbar({ initialView }: { initialView: ScheduleViewMode }) {
+  const [view, setView] = React.useState<ScheduleViewMode>(initialView)
+  const [range, setRange] = React.useState<ScheduleRange>(initialRangeFor(initialView))
+  const [timezone, setTimezone] = React.useState('Europe/Warsaw')
+  return (
+    <ScheduleToolbar
+      view={view}
+      range={range}
+      timezone={timezone}
+      onViewChange={setView}
+      onRangeChange={setRange}
+      onTimezoneChange={setTimezone}
+      className="w-full"
+    />
+  )
+}
+
+const scheduleViewEntry: GalleryEntry = {
+  id: 'schedule-view',
+  title: 'ScheduleView',
+  importPath: '@open-mercato/ui/backend/schedule',
+  variants: [
+    {
+      id: 'week',
+      title: 'Week (controlled)',
+      render: () => <DemoScheduleView initialView="week" />,
+      code: `import { ScheduleView, type ScheduleItem, type ScheduleRange, type ScheduleViewMode } from '@open-mercato/ui/backend/schedule'
+
+const [view, setView] = React.useState<ScheduleViewMode>('week')
+const [range, setRange] = React.useState<ScheduleRange>({
+  start: new Date(2026, 5, 7),
+  end: new Date(2026, 5, 13, 23, 59, 59, 999),
+})
+
+<ScheduleView
+  items={items /* ScheduleItem[] mapped from your domain records */}
+  view={view}
+  range={range}
+  timezone="Europe/Warsaw"
+  onViewChange={setView}
+  onRangeChange={setRange}
+/>`,
+    },
+    {
+      id: 'month',
+      title: 'Month (controlled)',
+      render: () => <DemoScheduleView initialView="month" />,
+      code: `import { ScheduleView, type ScheduleRange, type ScheduleViewMode } from '@open-mercato/ui/backend/schedule'
+
+const [view, setView] = React.useState<ScheduleViewMode>('month')
+const [range, setRange] = React.useState<ScheduleRange>({
+  start: new Date(2026, 5, 1),
+  end: new Date(2026, 5, 30, 23, 59, 59, 999),
+})
+
+<ScheduleView items={items} view={view} range={range} onViewChange={setView} onRangeChange={setRange} />`,
+    },
+  ],
+}
+
+const scheduleToolbarEntry: GalleryEntry = {
+  id: 'schedule-toolbar',
+  title: 'ScheduleToolbar',
+  importPath: '@open-mercato/ui/backend/schedule',
+  variants: [
+    {
+      id: 'week-with-timezone',
+      title: 'Week range with timezone',
+      render: () => <DemoScheduleToolbar initialView="week" />,
+      code: `import { ScheduleToolbar, type ScheduleRange, type ScheduleViewMode } from '@open-mercato/ui/backend/schedule'
+
+const [view, setView] = React.useState<ScheduleViewMode>('week')
+const [range, setRange] = React.useState<ScheduleRange>({
+  start: new Date(2026, 5, 7),
+  end: new Date(2026, 5, 13, 23, 59, 59, 999),
+})
+const [timezone, setTimezone] = React.useState('Europe/Warsaw')
+
+<ScheduleToolbar
+  view={view}
+  range={range}
+  timezone={timezone}
+  onViewChange={setView}
+  onRangeChange={setRange}
+  onTimezoneChange={setTimezone}
+/>`,
+    },
+    {
+      id: 'month-range',
+      title: 'Month range',
+      render: () => <DemoScheduleToolbar initialView="month" />,
+      code: `import { ScheduleToolbar, type ScheduleRange, type ScheduleViewMode } from '@open-mercato/ui/backend/schedule'
+
+const [view, setView] = React.useState<ScheduleViewMode>('month')
+const [range, setRange] = React.useState<ScheduleRange>({
+  start: new Date(2026, 5, 1),
+  end: new Date(2026, 5, 30, 23, 59, 59, 999),
+})
+
+<ScheduleToolbar view={view} range={range} onViewChange={setView} onRangeChange={setRange} />`,
+    },
+  ],
+}
+
+const scheduleGridEntry: GalleryEntry = {
+  id: 'schedule-grid',
+  title: 'ScheduleGrid',
+  importPath: '@open-mercato/ui/backend/schedule',
+  variants: [
+    {
+      id: 'three-day-board',
+      title: 'Three-day board',
+      render: () => (
+        <ScheduleGrid
+          items={sampleItems}
+          range={boardRange}
+          timezone="Europe/Warsaw"
+          onItemClick={() => {}}
+          onSlotClick={() => {}}
+          className="w-full"
+        />
+      ),
+      code: `import { ScheduleGrid, type ScheduleItem } from '@open-mercato/ui/backend/schedule'
+
+<ScheduleGrid
+  items={items /* ScheduleItem[] */}
+  range={{ start: new Date(2026, 5, 8), end: new Date(2026, 5, 10, 23, 59, 59, 999) }}
+  timezone="Europe/Warsaw"
+  onItemClick={(item) => openItem(item)}
+  onSlotClick={(slot) => createDraft(slot)}
+/>`,
+    },
+    {
+      id: 'read-only-empty',
+      title: 'Read-only empty day',
+      render: () => <ScheduleGrid items={[]} range={emptyDayRange} className="w-full" />,
+      code: `import { ScheduleGrid } from '@open-mercato/ui/backend/schedule'
+
+<ScheduleGrid
+  items={[]}
+  range={{ start: new Date(2026, 5, 11), end: new Date(2026, 5, 11, 23, 59, 59, 999) }}
+/>`,
+    },
+  ],
+}
+
+const scheduleAgendaEntry: GalleryEntry = {
+  id: 'schedule-agenda',
+  title: 'ScheduleAgenda',
+  importPath: '@open-mercato/ui/backend/schedule',
+  variants: [
+    {
+      id: 'two-days',
+      title: 'Two days with statuses',
+      render: () => (
+        <ScheduleAgenda
+          items={sampleItems}
+          range={agendaRange}
+          timezone="Europe/Warsaw"
+          onItemClick={() => {}}
+          onSlotClick={() => {}}
+          className="w-full"
+        />
+      ),
+      code: `import { ScheduleAgenda, type ScheduleItem } from '@open-mercato/ui/backend/schedule'
+
+<ScheduleAgenda
+  items={items /* ScheduleItem[] */}
+  range={{ start: new Date(2026, 5, 8), end: new Date(2026, 5, 9, 23, 59, 59, 999) }}
+  timezone="Europe/Warsaw"
+  onItemClick={(item) => openItem(item)}
+  onSlotClick={(slot) => createDraft(slot)}
+/>`,
+    },
+    {
+      id: 'read-only-day',
+      title: 'Read-only day (draft item)',
+      render: () => (
+        <ScheduleAgenda items={sampleItems} range={draftDayRange} className="w-full" />
+      ),
+      code: `import { ScheduleAgenda } from '@open-mercato/ui/backend/schedule'
+
+<ScheduleAgenda
+  items={items}
+  range={{ start: new Date(2026, 5, 12), end: new Date(2026, 5, 12, 23, 59, 59, 999) }}
+/>`,
+    },
+  ],
+}
+
+export const entries: GalleryEntry[] = [
+  scheduleViewEntry,
+  scheduleToolbarEntry,
+  scheduleGridEntry,
+  scheduleAgendaEntry,
+]

package/src/modules/design_system/gallery/registry.ts

@@ -0,0 +1,152 @@
+import * as React from 'react'
+import {
+  Palette,
+  Shapes,
+  MousePointerClick,
+  TextCursorInput,
+  CalendarDays,
+  BellRing,
+  Layers,
+  Compass,
+  Table2,
+  BarChart3,
+  Filter,
+  PanelsTopLeft,
+  LayoutTemplate,
+  Megaphone,
+  Bell,
+  CalendarClock,
+  Mail,
+} from 'lucide-react'
+import type { GalleryFamily } from './types'
+
+const familyIcon = (Icon: typeof Palette) => React.createElement(Icon, { className: 'size-4', 'aria-hidden': true })
+
+/** The DS Figma file id — every `figmaNodeId` in gallery entries points into this file. */
+export const DS_FIGMA_FILE = 'qCq9z6q1if0mpoRstV5OEA'
+
+/** Base of the deep links into the monorepo DS docs (`.ai/ui-components.md`). */
+export const DS_DOCS_URL = 'https://github.com/open-mercato/open-mercato/blob/main/.ai/ui-components.md'
+
+/** Route of the gallery backend page; used for section-nav hrefs and deep links. */
+export const GALLERY_BASE_PATH = '/backend/design-system'
+
+/** Builds a Figma deep link for a `nodeId` in `<page>:<node>` format. */
+export function figmaNodeUrl(nodeId: string): string {
+  return `https://www.figma.com/design/${DS_FIGMA_FILE}/?node-id=${nodeId.replace(':', '-')}`
+}
+
+/**
+ * Family manifest. Each family's entries live in `entries/<family>.tsx` and are
+ * loaded lazily via a dynamic import so a family's primitives (and their
+ * dependencies) only load when its section is opened.
+ *
+ * Adding a family: add the manifest row here and create `entries/<id>.tsx`
+ * exporting `entries: GalleryEntry[]`. The coverage-guard test
+ * (`__tests__/gallery-coverage.test.ts`) will tell you which primitives the
+ * new file must cover.
+ */
+export const galleryFamilies: GalleryFamily[] = [
+  {
+    id: 'foundations',
+    labelKey: 'design_system.families.foundations',
+    icon: familyIcon(Palette),
+    load: () => import('./entries/foundations'),
+  },
+  {
+    id: 'icons',
+    labelKey: 'design_system.families.icons',
+    icon: familyIcon(Shapes),
+    load: () => import('./entries/icons'),
+  },
+  {
+    id: 'buttons',
+    labelKey: 'design_system.families.buttons',
+    icon: familyIcon(MousePointerClick),
+    load: () => import('./entries/buttons'),
+  },
+  {
+    id: 'inputs',
+    labelKey: 'design_system.families.inputs',
+    icon: familyIcon(TextCursorInput),
+    load: () => import('./entries/inputs'),
+  },
+  {
+    id: 'dates',
+    labelKey: 'design_system.families.dates',
+    icon: familyIcon(CalendarDays),
+    load: () => import('./entries/dates'),
+  },
+  {
+    id: 'feedback',
+    labelKey: 'design_system.families.feedback',
+    icon: familyIcon(BellRing),
+    load: () => import('./entries/feedback'),
+  },
+  {
+    id: 'overlays',
+    labelKey: 'design_system.families.overlays',
+    icon: familyIcon(Layers),
+    load: () => import('./entries/overlays'),
+  },
+  {
+    id: 'navigation',
+    labelKey: 'design_system.families.navigation',
+    icon: familyIcon(Compass),
+    load: () => import('./entries/navigation'),
+  },
+  {
+    id: 'display',
+    labelKey: 'design_system.families.display',
+    icon: familyIcon(Table2),
+    load: () => import('./entries/display'),
+  },
+  {
+    id: 'charts',
+    labelKey: 'design_system.families.charts',
+    icon: familyIcon(BarChart3),
+    load: () => import('./entries/charts'),
+  },
+  {
+    id: 'filters',
+    labelKey: 'design_system.families.filters',
+    icon: familyIcon(Filter),
+    load: () => import('./entries/filters'),
+  },
+  {
+    id: 'detail',
+    labelKey: 'design_system.families.detail',
+    icon: familyIcon(PanelsTopLeft),
+    load: () => import('./entries/detail'),
+  },
+  {
+    id: 'scaffolding',
+    labelKey: 'design_system.families.scaffolding',
+    icon: familyIcon(LayoutTemplate),
+    load: () => import('./entries/scaffolding'),
+  },
+  {
+    id: 'banners',
+    labelKey: 'design_system.families.banners',
+    icon: familyIcon(Megaphone),
+    load: () => import('./entries/banners'),
+  },
+  {
+    id: 'notifications',
+    labelKey: 'design_system.families.notifications',
+    icon: familyIcon(Bell),
+    load: () => import('./entries/notifications'),
+  },
+  {
+    id: 'schedule',
+    labelKey: 'design_system.families.schedule',
+    icon: familyIcon(CalendarClock),
+    load: () => import('./entries/schedule'),
+  },
+  {
+    id: 'messages',
+    labelKey: 'design_system.families.messages',
+    icon: familyIcon(Mail),
+    load: () => import('./entries/messages'),
+  },
+]

package/src/modules/design_system/gallery/types.ts

@@ -0,0 +1,32 @@
+import type React from 'react'
+
+export type GalleryVariant = {
+  id: string                    // 'destructive-soft'
+  title: string                 // human label; component/variant names are not translated
+  render: () => React.ReactNode // live preview, real primitives only
+  code: string                  // the snippet the copy button yields
+}
+
+export type GalleryUsage = {
+  do?: string[]                 // when/how to use — developer-facing docs prose (English, like ui-components.md)
+  dont?: string[]               // anti-patterns for this component
+}
+
+export type GalleryEntry = {
+  usage?: GalleryUsage
+  keywords?: string[]          // extra search aliases (e.g. 'radiobutton' for Radio)
+  id: string                    // 'button' — unique across the whole gallery
+  title: string                 // 'Button'
+  importPath: string            // '@open-mercato/ui/primitives/button'
+  descriptionKey?: string       // i18n key for the one-line summary
+  docsAnchor?: string           // '#button' into .ai/ui-components.md (monorepo) — hidden when docs are absent
+  figmaNodeId?: string          // node in file qCq9z6q1if0mpoRstV5OEA
+  variants: GalleryVariant[]
+}
+
+export type GalleryFamily = {
+  id: string                    // 'charts'
+  labelKey: string              // i18n key for the family label
+  icon?: React.ReactNode        // section-nav icon (lucide, size-4)
+  load: () => Promise<{ entries: GalleryEntry[] }>   // next/dynamic-compatible loader
+}

package/src/modules/design_system/i18n/.hardcoded-allowlist.json

@@ -0,0 +1,71 @@
+{
+  "version": 1,
+  "entries": [
+    {
+      "file": "gallery/components/GalleryShell.tsx",
+      "kind": "jsx-attr",
+      "match": "Design system",
+      "reason": "English fallback for titleKey='design_system.nav.title'; the translated value comes from the module i18n files."
+    },
+    {
+      "file": "gallery/entries/banners.tsx",
+      "reason": "Gallery demo content: live previews and their copyable code snippets are developer-facing technical content, deliberately untranslated (spec 2026-07-05-ds-live-component-gallery.md)."
+    },
+    {
+      "file": "gallery/entries/buttons.tsx",
+      "reason": "Gallery demo content: live previews and their copyable code snippets are developer-facing technical content, deliberately untranslated (spec 2026-07-05-ds-live-component-gallery.md)."
+    },
+    {
+      "file": "gallery/entries/charts.tsx",
+      "reason": "Gallery demo content: live previews and their copyable code snippets are developer-facing technical content, deliberately untranslated (spec 2026-07-05-ds-live-component-gallery.md)."
+    },
+    {
+      "file": "gallery/entries/dates.tsx",
+      "reason": "Gallery demo content: live previews and their copyable code snippets are developer-facing technical content, deliberately untranslated (spec 2026-07-05-ds-live-component-gallery.md)."
+    },
+    {
+      "file": "gallery/entries/detail.tsx",
+      "reason": "Gallery demo content: live previews and their copyable code snippets are developer-facing technical content, deliberately untranslated (spec 2026-07-05-ds-live-component-gallery.md)."
+    },
+    {
+      "file": "gallery/entries/display.tsx",
+      "reason": "Gallery demo content: live previews and their copyable code snippets are developer-facing technical content, deliberately untranslated (spec 2026-07-05-ds-live-component-gallery.md)."
+    },
+    {
+      "file": "gallery/entries/feedback.tsx",
+      "reason": "Gallery demo content: live previews and their copyable code snippets are developer-facing technical content, deliberately untranslated (spec 2026-07-05-ds-live-component-gallery.md)."
+    },
+    {
+      "file": "gallery/entries/filters.tsx",
+      "reason": "Gallery demo content: live previews and their copyable code snippets are developer-facing technical content, deliberately untranslated (spec 2026-07-05-ds-live-component-gallery.md)."
+    },
+    {
+      "file": "gallery/entries/inputs.tsx",
+      "reason": "Gallery demo content: live previews and their copyable code snippets are developer-facing technical content, deliberately untranslated (spec 2026-07-05-ds-live-component-gallery.md)."
+    },
+    {
+      "file": "gallery/entries/messages.tsx",
+      "reason": "Gallery demo content: live previews and their copyable code snippets are developer-facing technical content, deliberately untranslated (spec 2026-07-05-ds-live-component-gallery.md)."
+    },
+    {
+      "file": "gallery/entries/navigation.tsx",
+      "reason": "Gallery demo content: live previews and their copyable code snippets are developer-facing technical content, deliberately untranslated (spec 2026-07-05-ds-live-component-gallery.md)."
+    },
+    {
+      "file": "gallery/entries/notifications.tsx",
+      "reason": "Gallery demo content: live previews and their copyable code snippets are developer-facing technical content, deliberately untranslated (spec 2026-07-05-ds-live-component-gallery.md)."
+    },
+    {
+      "file": "gallery/entries/overlays.tsx",
+      "reason": "Gallery demo content: live previews and their copyable code snippets are developer-facing technical content, deliberately untranslated (spec 2026-07-05-ds-live-component-gallery.md)."
+    },
+    {
+      "file": "gallery/entries/scaffolding.tsx",
+      "reason": "Gallery demo content: live previews and their copyable code snippets are developer-facing technical content, deliberately untranslated (spec 2026-07-05-ds-live-component-gallery.md)."
+    },
+    {
+      "file": "gallery/entries/schedule.tsx",
+      "reason": "Gallery demo content: live previews and their copyable code snippets are developer-facing technical content, deliberately untranslated (spec 2026-07-05-ds-live-component-gallery.md)."
+    }
+  ]
+}

package/src/modules/design_system/i18n/de.json

@@ -0,0 +1,46 @@
+{
+  "design_system.entries.button.description": "Primärer Aktions-Button mit der vollen DS-Varianten- und Größenskala.",
+  "design_system.entries.buttonGroup.description": "Verbundene Gruppe zusammengehöriger Aktions-Buttons mit gemeinsamem Rahmen.",
+  "design_system.entries.fancyButton.description": "Marketing-Button mit Verlauf für hervorgehobene Aktionen.",
+  "design_system.entries.iconButton.description": "Quadratischer Button nur mit Icon; erfordert immer ein aria-label.",
+  "design_system.entries.linkButton.description": "Textlink im Stil eines DS-Bedienelements.",
+  "design_system.entries.socialButton.description": "Authentifizierungs-Button in Markenfarben für Social Sign-in.",
+  "design_system.families.banners": "Banner & Hinweise",
+  "design_system.families.buttons": "Buttons",
+  "design_system.families.charts": "Diagramme",
+  "design_system.families.dates": "Datum & Uhrzeit",
+  "design_system.families.detail": "Detailabschnitte",
+  "design_system.families.display": "Datenanzeige",
+  "design_system.families.feedback": "Rückmeldungen",
+  "design_system.families.filters": "Filter",
+  "design_system.families.foundations": "Grundlagen",
+  "design_system.families.icons": "Icons",
+  "design_system.families.inputs": "Eingabefelder",
+  "design_system.families.messages": "Nachrichten",
+  "design_system.families.navigation": "Navigation",
+  "design_system.families.notifications": "Benachrichtigungen",
+  "design_system.families.overlays": "Overlays",
+  "design_system.families.scaffolding": "Seitengerüst",
+  "design_system.families.schedule": "Zeitplan",
+  "design_system.gallery.copied": "Snippet in die Zwischenablage kopiert",
+  "design_system.gallery.copy": "Code kopieren",
+  "design_system.gallery.copyFailed": "Snippet konnte nicht kopiert werden",
+  "design_system.gallery.familiesGroup": "Familien",
+  "design_system.gallery.familyContents": "Komponenten dieser Familie",
+  "design_system.gallery.iconCopied": "Kopiert: {snippet}",
+  "design_system.gallery.iconCopyJsx": "JSX kopieren (lucide-react)",
+  "design_system.gallery.iconCopyMeta": "Namen für page.meta icon kopieren",
+  "design_system.gallery.iconCountAll": "{total} Icons",
+  "design_system.gallery.iconCountFiltered": "{visible} von {total} Icons",
+  "design_system.gallery.iconSearchPlaceholder": "Icons filtern…",
+  "design_system.gallery.loadFailed": "Diese Familie konnte nicht geladen werden",
+  "design_system.gallery.noResults": "Keine Komponenten entsprechen der Suche",
+  "design_system.gallery.openInFigma": "In Figma öffnen",
+  "design_system.gallery.retry": "Erneut versuchen",
+  "design_system.gallery.searchPlaceholder": "Komponenten suchen…",
+  "design_system.gallery.usageDo": "Tun",
+  "design_system.gallery.usageDont": "Vermeiden",
+  "design_system.gallery.viewDocs": "Dokumentation ansehen",
+  "design_system.nav.group": "Entwickler",
+  "design_system.nav.title": "Designsystem"
+}

package/src/modules/design_system/i18n/en.json

@@ -0,0 +1,46 @@
+{
+  "design_system.entries.button.description": "Primary action trigger with the full DS variant and size scale.",
+  "design_system.entries.buttonGroup.description": "Joined group of related action buttons sharing one border.",
+  "design_system.entries.fancyButton.description": "Gradient, marketing-grade button for standout actions.",
+  "design_system.entries.iconButton.description": "Square icon-only button; always requires an aria-label.",
+  "design_system.entries.linkButton.description": "Inline text link styled as a DS control.",
+  "design_system.entries.socialButton.description": "Brand-colored authentication button for social sign-in.",
+  "design_system.families.banners": "Banners & callouts",
+  "design_system.families.buttons": "Buttons",
+  "design_system.families.charts": "Charts",
+  "design_system.families.dates": "Dates & time",
+  "design_system.families.detail": "Detail sections",
+  "design_system.families.display": "Data display",
+  "design_system.families.feedback": "Feedback",
+  "design_system.families.filters": "Filters",
+  "design_system.families.foundations": "Foundations",
+  "design_system.families.icons": "Icons",
+  "design_system.families.inputs": "Inputs",
+  "design_system.families.messages": "Messages",
+  "design_system.families.navigation": "Navigation",
+  "design_system.families.notifications": "Notifications",
+  "design_system.families.overlays": "Overlays",
+  "design_system.families.scaffolding": "Page scaffolding",
+  "design_system.families.schedule": "Schedule",
+  "design_system.gallery.copied": "Snippet copied to clipboard",
+  "design_system.gallery.copy": "Copy code",
+  "design_system.gallery.copyFailed": "Could not copy the snippet",
+  "design_system.gallery.familiesGroup": "Families",
+  "design_system.gallery.familyContents": "Components in this family",
+  "design_system.gallery.iconCopied": "Copied: {snippet}",
+  "design_system.gallery.iconCopyJsx": "Copy JSX (lucide-react)",
+  "design_system.gallery.iconCopyMeta": "Copy name for page.meta icon",
+  "design_system.gallery.iconCountAll": "{total} icons",
+  "design_system.gallery.iconCountFiltered": "{visible} of {total} icons",
+  "design_system.gallery.iconSearchPlaceholder": "Filter icons…",
+  "design_system.gallery.loadFailed": "Could not load this family",
+  "design_system.gallery.noResults": "No components match your search",
+  "design_system.gallery.openInFigma": "Open in Figma",
+  "design_system.gallery.retry": "Retry",
+  "design_system.gallery.searchPlaceholder": "Search components…",
+  "design_system.gallery.usageDo": "Do",
+  "design_system.gallery.usageDont": "Don't",
+  "design_system.gallery.viewDocs": "View docs",
+  "design_system.nav.group": "Developer",
+  "design_system.nav.title": "Design system"
+}