@lssm-tech/lib.design-system

import {
  DesignSystemThemeProvider,
  resolveThemeModeTokens,
  themeSpecToCssVariables,
  themeSpecToTailwindCss,
  themeSpecToTailwindPreset,
} from '@lssm-tech/lib.design-system';

const tokens = resolveThemeModeTokens(themeSpec, 'light', {
  targets: ['tenant:acme'],
});

export default themeSpecToTailwindPreset(tokens);

const css = themeSpecToTailwindCss(
  themeSpecToCssVariables(themeSpec, { targets: ['tenant:acme'] }),
  { includeCustomVariant: true }
);

export function TenantSurface({ children }: { children: React.ReactNode }) {
  return (
    <DesignSystemThemeProvider
      theme={themeSpec}
      targets={['tenant:acme']}
      mode="dark"
      applyCssVariables
    >
      {children}
    </DesignSystemThemeProvider>
  );
}

import { themeSpecToTailwindPreset } from '@lssm-tech/lib.design-system/theme';
import { Select } from '@lssm-tech/lib.design-system/controls';
import { FormDialog } from '@lssm-tech/lib.design-system/forms';
import { HStack } from '@lssm-tech/lib.design-system/layout';
import { AdaptivePanel } from '@lssm-tech/lib.design-system/components/overlays';
import { ObjectReferenceHandler } from '@lssm-tech/lib.design-system/components/object-reference';

// Root imports remain supported:
import { Button, DataTable } from '@lssm-tech/lib.design-system';

import {
  ObjectReferenceHandler,
  createDefaultObjectReferenceActions,
  createMapsReferenceActions,
  type ObjectReferenceDescriptor,
  type ObjectReferenceOpenHrefHandler,
} from '@lssm-tech/lib.design-system';

const customerContact: ObjectReferenceDescriptor = {
  id: 'user.amina',
  kind: 'user',
  label: 'Amina Laurent',
  description: 'Customer success owner',
  href: '/customers/acme/users/amina',
  properties: [
    {
      id: 'user.amina.email',
      kind: 'email',
      label: 'Email',
      value: 'amina@example.com',
    },
    {
      id: 'user.amina.phone',
      kind: 'phone',
      label: 'Phone',
      value: '+33 1 23 45 67 89',
    },
  ],
  sections: [
    {
      id: 'customer-site',
      title: 'Primary site',
      properties: [
        {
          id: 'customer-site.address',
          kind: 'address',
          label: 'Paris office',
          value: '10 rue de Rivoli, 75001 Paris',
          actions: createMapsReferenceActions({
            id: 'customer-site.address',
            kind: 'address',
            label: 'Paris office',
            value: '10 rue de Rivoli, 75001 Paris',
          }),
        },
      ],
    },
  ],
};

const openHref: ObjectReferenceOpenHrefHandler = (href, _event, options) => {
  if (options.target === 'new-page') {
    window.open(href, '_blank', 'noopener,noreferrer');
    return;
  }

  window.location.assign(href);
};

<ObjectReferenceHandler
  reference={customerContact}
  actions={createDefaultObjectReferenceActions(customerContact)}
  interactivityVisibility="icon"
  openTarget="same-page"
  panelMode="responsive"
  mobilePanelMode="drawer"
  desktopPanelMode="sheet"
  responsiveBreakpoint="md"
  openHref={openHref}
/>;

import { AdaptivePanel } from '@lssm-tech/lib.design-system/components/overlays';

<AdaptivePanel
  open={open}
  onOpenChange={setOpen}
  trigger={<button type="button">Edit</button>}
  title="Edit customer"
  description="Update contact and site details."
  mode="responsive"
  mobileMode="drawer"
  desktopMode="sheet"
  breakpoint="md"
  sheetSide="right"
  drawerDirection="bottom"
>
  {content}
</AdaptivePanel>;

Find every user-facing address, phone number, email, user, customer, file, URL, and tenant-specific object reference currently rendered as inert text.

Replace each one with ObjectReferenceHandler from @lssm-tech/lib.design-system. Keep descriptors data-only: id, kind, label, value, href, openTarget, properties, sections, metadata, iconKey, and ariaLabel are allowed; React callbacks belong in handler props only.

Use properties and sections for rich references. For example, a user reference can expose email, phone, address, files, and customer links in one panel instead of rendering separate disconnected strings.

Use panelMode="responsive" by default. Let desktop render a sheet and small screens render a bottom drawer through AdaptivePanel. Do not call Sheet or Drawer directly for this interaction unless a lower-level primitive is being implemented.

Use openTarget="same-page" unless product requirements explicitly require a new page. Put custom copy, navigation, analytics, permissions, or tenant-specific actions in copyHandler, openHref, actionHandlers, onAction, and onActionError.

For addresses, use createMapsReferenceActions so users can choose Google Maps, Apple Maps, or Waze. For email and phone references, prefer createDefaultObjectReferenceActions unless a product-specific action set is required.

After replacing references, verify keyboard access, visible affordance choice (none, underline, or icon), safe href behavior, mobile drawer layout, and desktop sheet layout.

import { Button, DataTable } from '@lssm-tech/lib.design-system';
import { useContractTable } from '@lssm-tech/lib.presentation-runtime-react';

import { SHOWCASE_ROWS } from '@lssm-tech/example.data-grid-showcase/ui/data-grid-showcase.data';
import { useShowcaseColumns } from '@lssm-tech/example.data-grid-showcase/ui/data-grid-showcase.columns';
import {
  ExpandedRowContent,
  ShowcaseToolbar,
} from '@lssm-tech/example.data-grid-showcase/ui/data-grid-showcase.parts';

export function AccountHealthTable() {
  const columns = useShowcaseColumns();

  const controller = useContractTable({
    data: SHOWCASE_ROWS,
    columns,
    selectionMode: 'multiple',
    initialState: {
      sorting: [{ id: 'arr', desc: true }],
      pagination: { pageIndex: 0, pageSize: 4 },
      columnVisibility: { notes: false },
      columnPinning: { left: ['account'], right: [] },
    },
    renderExpandedContent: (row) => <ExpandedRowContent row={row} />,
    getCanExpand: () => true,
  });

  return (
    <DataTable
      controller={controller}
      title="Account health"
      description="Composed table surface for the canonical account grid."
      headerActions={<Button variant="outline">Reset</Button>}
      toolbar={
        <ShowcaseToolbar
          controller={controller}
          label="Client mode"
          primaryColumnId="account"
          toggleColumnId="notes"
          pinColumnId="owner"
          sortColumnIds={['arr', 'renewalDate']}
        />
      }
      loading={false}
      emptyState={<div>No rows available.</div>}
      footer={`Page ${controller.pageIndex + 1} of ${controller.pageCount}`}
    />
  );
}