@lssm-tech/lib.design-system

1import {
2  DesignSystemThemeProvider,
3  resolveThemeModeTokens,
4  themeSpecToCssVariables,
5  themeSpecToTailwindCss,
6  themeSpecToTailwindPreset,
7} from '@lssm-tech/lib.design-system';
8
9const tokens = resolveThemeModeTokens(themeSpec, 'light', {
10  targets: ['tenant:acme'],
11});
12
13export default themeSpecToTailwindPreset(tokens);
14
15const css = themeSpecToTailwindCss(
16  themeSpecToCssVariables(themeSpec, { targets: ['tenant:acme'] }),
17  { includeCustomVariant: true }
18);
19
20export function TenantSurface({ children }: { children: React.ReactNode }) {
21  return (
22    <DesignSystemThemeProvider
23      theme={themeSpec}
24      targets={['tenant:acme']}
25      mode="dark"
26      applyCssVariables
27    >
28      {children}
29    </DesignSystemThemeProvider>
30  );
31}

1import { themeSpecToTailwindPreset } from '@lssm-tech/lib.design-system/theme';
2import { Select } from '@lssm-tech/lib.design-system/controls';
3import { FormDialog } from '@lssm-tech/lib.design-system/forms';
4import { HStack } from '@lssm-tech/lib.design-system/layout';
5import { AdaptivePanel } from '@lssm-tech/lib.design-system/components/overlays';
6import { RichRef } from '@lssm-tech/lib.ui-kit-web/rich-ref';
7import { ObjectPreview, ObjectPanel } from '@lssm-tech/lib.design-system/rich-reference/layouts/object';
8
9// Root imports remain supported:
10import { Button, DataTable } from '@lssm-tech/lib.design-system';

1import { RichRef } from '@lssm-tech/lib.ui-kit-web/rich-ref';
2
3// References resolve through the shared ReferenceDispatcher wired in
4// @lssm-tech/integration.runtime/rich-reference. The runtime enforces
5// post-handler redaction and applies coarse + fine personalization.
6
7<RichRef
8  kindId="object"
9  refId="user.amina"
10  variant="inline"
11  panelMode="popover"
12/>;
13
14// Custom per-kind layouts are registered at app boot:
15import { registerRichReferenceLayouts } from '@lssm-tech/lib.design-system';
16import { CustomerPreview, CustomerPanel } from '@/app/customers/rich-ref-layout';
17
18registerRichReferenceLayouts('customer', {
19  Preview: CustomerPreview,
20  Panel: CustomerPanel,
21});

1import { AdaptivePanel } from '@lssm-tech/lib.design-system/components/overlays';
2
3<AdaptivePanel
4  open={open}
5  onOpenChange={setOpen}
6  trigger={<button type="button">Edit</button>}
7  title="Edit customer"
8  description="Update contact and site details."
9  mode="responsive"
10  mobileMode="drawer"
11  desktopMode="sheet"
12  breakpoint="md"
13  sheetSide="right"
14  drawerDirection="bottom"
15>
16  {content}
17</AdaptivePanel>;

1Find every user-facing address, phone number, email, user, customer, file, URL, and tenant-specific reference currently rendered as inert text.
2
3Replace each one with <RichRef> from @lssm-tech/lib.ui-kit-web/rich-ref. Pass stable kindId and refId props; the shared ReferenceDispatcher (wired in @lssm-tech/integration.runtime/rich-reference) resolves payloads, enforces post-handler redaction, and applies coarse + fine personalization.
4
5Use one of the six built-in kinds when applicable: database-record, object, link, file, media, code-symbol. For domain-specific kinds (e.g. customer), define a per-kind layout (Preview + Panel) and register it via registerRichReferenceLayouts(kindId, { Preview, Panel }).
6
7Use panelMode="popover" for compact previews, "drawer" for mobile-first detail, "modal" for blocking review, "route" for navigable detail, or "inline-expand" for in-place expansion. Do not call low-level overlay primitives directly for this interaction unless a lower-level primitive is being implemented.
8
9Use panelMode="popover" for compact previews, "drawer" for mobile-first detail, "modal" for blocking review, "route" for navigable detail, or "inline-expand" for in-place expansion. Tenant-specific permissions and per-instance authz belong in the KindPolicyProvider implementation (typically @lssm-tech/lib.surface-runtime/rich-reference/rolemorph), not in the renderer.
10
11After replacing references, verify keyboard access, visible affordance choice (none, underline, or icon), safe href behavior, mobile drawer layout, and desktop sheet layout. Verify denied references render as redaction placeholders with HMAC-signed DenialToken wire forms.

1import { Button, DataTable } from '@lssm-tech/lib.design-system';
2import { useContractTable } from '@lssm-tech/lib.presentation-runtime-react';
3
4import { SHOWCASE_ROWS } from '@lssm-tech/example.data-grid-showcase/ui/data-grid-showcase.data';
5import { useShowcaseColumns } from '@lssm-tech/example.data-grid-showcase/ui/data-grid-showcase.columns';
6import {
7  ExpandedRowContent,
8  ShowcaseToolbar,
9} from '@lssm-tech/example.data-grid-showcase/ui/data-grid-showcase.parts';
10
11export function AccountHealthTable() {
12  const columns = useShowcaseColumns();
13
14  const controller = useContractTable({
15    data: SHOWCASE_ROWS,
16    columns,
17    selectionMode: 'multiple',
18    initialState: {
19      sorting: [{ id: 'arr', desc: true }],
20      pagination: { pageIndex: 0, pageSize: 4 },
21      columnVisibility: { notes: false },
22      columnPinning: { left: ['account'], right: [] },
23    },
24    renderExpandedContent: (row) => <ExpandedRowContent row={row} />,
25    getCanExpand: () => true,
26  });
27
28  return (
29    <DataTable
30      controller={controller}
31      title="Account health"
32      description="Composed table surface for the canonical account grid."
33      headerActions={<Button variant="outline">Reset</Button>}
34      toolbar={
35        <ShowcaseToolbar
36          controller={controller}
37          label="Client mode"
38          primaryColumnId="account"
39          toggleColumnId="notes"
40          pinColumnId="owner"
41          sortColumnIds={['arr', 'renewalDate']}
42        />
43      }
44      loading={false}
45      emptyState={<div>No rows available.</div>}
46      footer={`Page ${controller.pageIndex + 1} of ${controller.pageCount}`}
47    />
48  );
49}