yksa-svelte-kit

The YKSA UI kit for Svelte 5. Same markup and classes as the Django snippets in yksa-web-kit, so a Svelte page and a template page look the same. The rules are in ../../ecosystem/ui-kit.md.

Entry points

Import	What
yksa-svelte-kit	Kit components (State, Chip, Fact, Kpi, UtcTime, Pager, FilterBar, Alert, ...), primitives (Dropdown, Modal, Tooltip, SelectSearchable), SPA chrome (AppShell, Navbar, Footer), floating panels (MapPage, PanelCard, PanelTabs, Sheet), i18n, state helpers, Django helpers
yksa-svelte-kit/map	MapLibre map and the scene API from stratoflights. MapLibre loads on first render, not on import
yksa-svelte-kit/geo	Tile-free SVG widgets: GroundTrack, SkyPlot and AzElPlot (ports of ops pass-geometry.js and qsl plots.ts)
yksa-svelte-kit/table	Server-side DataTable on TanStack Table 9; FilterPanel (FixedFilters for coarse filters, QueryBuilder for one AND/OR group of rules); LiveQuery for LiveView hosts; the TableQuery contract
yksa-svelte-kit/table/query	The TableQuery contract alone, importable from Node (mock servers, tests)
yksa-svelte-kit/styles/index.css	Bootstrap 5.3 (estate fork), bootstrap-icons, kit.css and the Svelte additions. For SPAs
yksa-svelte-kit/styles/islands.css	Svelte additions only. For islands inside a Django page that already loads the kit

maplibre-gl and @tanstack/svelte-table are optional peer dependencies; install them only where /map or /table is used.

Notes

• Interactive primitives are Bits UI rendered with Bootstrap classes. No Bootstrap JS.
• styles/kit.css and styles/bootstrap.min.css are copied from yksa-web-kit by npm run sync-css, which npm run build runs. A test fails if they drift.
• Kit strings live under kit.*. Apps add their own catalogs with registerMessages.
• The ru kit strings need review.
• A LiveView host should drive tables through LiveQuery. Props arrive a round trip late, and two quick changes built on the stale prop would undo each other.
• Columns choose where they filter: fixed puts them in the fixed bar (chips only up to CHIP_LIMIT options, a select beyond that), queryable: false keeps them out of the builder.
• format on a column is opt-in display only: bold, mono (machine values), muted, chip, bool: 'checkbox', decimals. Exports always carry the stored value.
• DataTable cells offer an "equals" rule on hover (cellFilters), filtered columns carry a funnel mark, and exportable adds an export dialog (CSV, TSV, JSON, NDJSON). "All matching rows" pages through loadRows; for a LiveView host that is an event answered with {:reply, page, socket}.

Development

npm install
npm run build      # dist/; services install the kit from a git tag, and its prepare script builds this
npm run check
npm test

Consumers that install the kit from a local checkout need two Vite settings. Without the second, the dev server refuses to serve the icon font and every icon is blank (production builds are unaffected):

resolve: { dedupe: ['svelte', 'bits-ui', 'maplibre-gl', '@tanstack/svelte-table'] },
server: { fs: { allow: [searchForWorkspaceRoot(process.cwd()), '<path to>/yksa-svelte-kit'] } },