@startsimpli/ui 0.4.114 → 0.4.115

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.114",
+  "version": "0.4.115",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/components/ui/__tests__/table-scroll.test.tsx

@@ -0,0 +1,153 @@
+/**
+ * Guards for the table's horizontal-scroll affordance (startsim-5pq7h).
+ *
+ * The defect these come from is PURELY VISUAL — "there is no sliding bar so it
+ * makes it difficult to see all the columns" — and jsdom has no layout, so
+ * NOTHING here proves a scrollbar is visible on screen. That claim is carried
+ * by browser measurement (headed Chrome + headed WebKit on macOS: 0px of
+ * scrollbar layout height before, 10px after, 0px when the table fits).
+ *
+ * What these DO guard is the two things a later edit can silently break:
+ *  - the CSS that produces the bar, including the `scrollbar-width` rule that
+ *    measurably DELETES it, and
+ *  - the "no decoration when nothing overflows" contract.
+ */
+import { render, screen } from '@testing-library/react'
+import { renderHook, act } from '@testing-library/react'
+import { useRef } from 'react'
+import { Table, TableBody, TableCell, TableRow } from '../table'
+import {
+  TABLE_SCROLL_CSS,
+  TABLE_SCROLL_STYLE_ID,
+  TABLE_SCROLLER_CLASS,
+  useScrollEdges,
+} from '../table-scroll'
+
+describe('TABLE_SCROLL_CSS', () => {
+  it('styles the webkit scrollbar, which is what gives the bar layout height', () => {
+    expect(TABLE_SCROLL_CSS).toContain(`.${TABLE_SCROLLER_CLASS}::-webkit-scrollbar`)
+    expect(TABLE_SCROLL_CSS).toMatch(/height:\s*10px/)
+  })
+
+  /**
+   * The finding this test exists for. MEASURED in headed Chrome on macOS:
+   *
+   *   ::-webkit-scrollbar { height: 10px }                 -> 10px of layout height
+   *   the same rule PLUS scrollbar-width / scrollbar-color ->  0px (overlay again)
+   *
+   * Chromium honours the standard properties instead of the custom scrollbar
+   * and reverts to a zero-height overlay bar. Every "cross-browser scrollbar"
+   * snippet on the web tells you to add them, and doing so here would silently
+   * undo the fix with no visible error anywhere. Firefox on macOS gains nothing
+   * from them either (measured 0px with the property confirmed applied), so
+   * there is no browser to trade away.
+   */
+  it('does NOT set scrollbar-width or scrollbar-color, which would revert Chromium to an overlay bar', () => {
+    expect(TABLE_SCROLL_CSS).not.toMatch(/scrollbar-width/)
+    expect(TABLE_SCROLL_CSS).not.toMatch(/scrollbar-color/)
+  })
+
+  /**
+   * `overflow: auto` is what makes the bar conditional on real overflow. Under
+   * `overflow: scroll` every narrow table in the fleet would grow a dead 10px
+   * bar — a regression, not a fix.
+   */
+  it('leaves the scroller on overflow:auto so the bar is conditional on real overflow', () => {
+    expect(TABLE_SCROLL_CSS).not.toMatch(/overflow\s*:\s*scroll/)
+  })
+})
+
+describe('Table', () => {
+  const renderTable = (props: Record<string, unknown> = {}) =>
+    render(
+      <Table {...props}>
+        <TableBody>
+          <TableRow>
+            <TableCell>cell</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    )
+
+  it('marks its scroll container so the scrollbar rules can find it', () => {
+    renderTable()
+    const table = screen.getByRole('table')
+    expect(table.parentElement).toHaveClass(TABLE_SCROLLER_CLASS)
+    expect(table.parentElement).toHaveClass('overflow-auto')
+  })
+
+  it('injects the stylesheet once, however many tables are on the page', () => {
+    render(
+      <>
+        <Table />
+        <Table />
+        <Table />
+      </>
+    )
+    expect(document.querySelectorAll(`#${TABLE_SCROLL_STYLE_ID}`)).toHaveLength(1)
+    expect(document.getElementById(TABLE_SCROLL_STYLE_ID)?.textContent).toBe(
+      TABLE_SCROLL_CSS
+    )
+  })
+
+  it('sends containerClassName to the scrolling box and className to the table', () => {
+    renderTable({ containerClassName: 'max-h-96', className: 'my-table' })
+    const table = screen.getByRole('table')
+    expect(table).toHaveClass('my-table')
+    expect(table.parentElement).toHaveClass('max-h-96')
+    expect(table).not.toHaveClass('max-h-96')
+  })
+})
+
+describe('useScrollEdges', () => {
+  /** jsdom has no layout, so geometry has to be stated outright. */
+  const harness = (clientWidth: number, scrollWidth: number, scrollLeft: number) => {
+    const scroller = document.createElement('div')
+    const table = document.createElement('table')
+    scroller.appendChild(table)
+    document.body.appendChild(scroller)
+    Object.defineProperty(scroller, 'clientWidth', { value: clientWidth, configurable: true })
+    Object.defineProperty(scroller, 'scrollWidth', { value: scrollWidth, configurable: true })
+    scroller.scrollLeft = scrollLeft
+    return { scroller, table }
+  }
+
+  const run = (clientWidth: number, scrollWidth: number, scrollLeft = 0) => {
+    const { scroller, table } = harness(clientWidth, scrollWidth, scrollLeft)
+    const { result } = renderHook(() => {
+      const ref = useRef<HTMLTableElement | null>(table)
+      return useScrollEdges(ref)
+    })
+    return { edges: result.current, scroller, result }
+  }
+
+  it('reports no edge at all when the table fits — a hint under a table that fits is the same defect as a bar under one', () => {
+    expect(run(846, 846).edges).toEqual({ left: false, right: false })
+  })
+
+  it('ignores a sub-pixel overhang rather than decorating a table that visually fits', () => {
+    expect(run(846, 847).edges).toEqual({ left: false, right: false })
+  })
+
+  it('reports the right edge when columns are unreached to the right', () => {
+    expect(run(846, 1014).edges).toEqual({ left: false, right: true })
+  })
+
+  it('reports the left edge once scrolled away from the start', () => {
+    expect(run(846, 1014, 84).edges).toEqual({ left: true, right: true })
+  })
+
+  it('drops the right edge at the end of the scroll range', () => {
+    expect(run(846, 1014, 168).edges).toEqual({ left: true, right: false })
+  })
+
+  it('re-reads geometry when the scroller is scrolled', () => {
+    const { scroller, result } = run(846, 1014)
+    expect(result.current).toEqual({ left: false, right: true })
+    act(() => {
+      scroller.scrollLeft = 168
+      scroller.dispatchEvent(new Event('scroll'))
+    })
+    expect(result.current).toEqual({ left: true, right: false })
+  })
+})

package/src/components/ui/table-scroll.ts

@@ -0,0 +1,157 @@
+'use client'
+
+import { useEffect, useState, type RefObject } from 'react'
+
+export const TABLE_SCROLL_STYLE_ID = 'ss-table-scroll-affordance'
+
+/** The element that actually scrolls: the wrapper `Table` puts around `<table>`. */
+export const TABLE_SCROLLER_CLASS = 'ss-table-scroller'
+/** A non-scrolling box around the scroller, so the edge hints can be pinned to it. */
+export const TABLE_SHELL_CLASS = 'ss-table-shell'
+export const TABLE_EDGE_CLASS = 'ss-table-edge'
+export const TABLE_EDGE_LEFT_CLASS = 'ss-table-edge-left'
+export const TABLE_EDGE_RIGHT_CLASS = 'ss-table-edge-right'
+
+/**
+ * Wide tables scroll, but on macOS nothing says so (startsim-5pq7h).
+ *
+ * A reviewer reported "there is no sliding bar so it makes it difficult to see
+ * all the columns". The container did scroll the whole time; macOS renders an
+ * OVERLAY scrollbar that occupies no layout height and is invisible at rest, so
+ * the affordance was missing, not the scrolling.
+ *
+ * MEASURED 2026-09-07, headed Google Chrome and headed WebKit on macOS, on a
+ * 400px box holding 900px of content (`offsetHeight - clientHeight`, borders
+ * subtracted):
+ *
+ *   no scrollbar CSS                                       0px   (overlay)
+ *   scrollbar-width: thin                                  0px
+ *   scrollbar-color: <thumb> <track>                       0px
+ *   ::-webkit-scrollbar { height: 10px }                  10px   <-- this one
+ *   ::-webkit-scrollbar + scrollbar-width/-color           0px   <-- see below
+ *   ::-webkit-scrollbar, content NARROWER than the box      0px   (no regression)
+ *
+ * TWO RESULTS THAT ARE EASY TO UNDO BY ACCIDENT:
+ *
+ * 1. DO NOT ADD `scrollbar-width` OR `scrollbar-color` HERE. Every snippet on
+ *    the web pairs them with the -webkit- rules "for Firefox". Measured: when
+ *    the standard properties are set at the same specificity, Chromium honours
+ *    them INSTEAD of the custom scrollbar and reverts the element to a
+ *    zero-height overlay bar — i.e. adding them silently deletes this fix.
+ *    Firefox on macOS gains nothing from them anyway (measured 0px with
+ *    `scrollbar-width: thin` applied and confirmed in the computed style), so
+ *    there is no Firefox branch to lose. Firefox users are served by the edge
+ *    hint below instead.
+ *
+ * 2. The bar costs layout height ONLY while the element overflows — that is
+ *    `overflow: auto`, not something this stylesheet decides — so it never
+ *    appears under a table that fits. Keep the scroller on `auto`, never
+ *    `scroll`, or every narrow table in the fleet grows a dead bar.
+ *
+ * On Windows/Linux this REPLACES the ~15px classic bar with a 10px one; it does
+ * not reserve a second gutter, so no platform guard is needed. Nothing here
+ * animates or transitions, so `prefers-reduced-motion` has nothing to honour.
+ */
+export const TABLE_SCROLL_CSS = `
+.${TABLE_SCROLLER_CLASS}::-webkit-scrollbar {
+  height: 10px;
+  width: 10px;
+}
+.${TABLE_SCROLLER_CLASS}::-webkit-scrollbar-track {
+  background: transparent;
+}
+.${TABLE_SCROLLER_CLASS}::-webkit-scrollbar-thumb {
+  border-radius: 9999px;
+  background-color: color-mix(in srgb, currentColor 22%, transparent);
+}
+.${TABLE_SCROLLER_CLASS}::-webkit-scrollbar-thumb:hover {
+  background-color: color-mix(in srgb, currentColor 45%, transparent);
+}
+.${TABLE_SHELL_CLASS} {
+  position: relative;
+}
+.${TABLE_EDGE_CLASS} {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 24px;
+  pointer-events: none;
+}
+.${TABLE_EDGE_RIGHT_CLASS} {
+  right: 0;
+  background-image: linear-gradient(to left, hsl(var(--background)), hsl(var(--background) / 0));
+}
+.${TABLE_EDGE_LEFT_CLASS} {
+  left: 0;
+  background-image: linear-gradient(to right, hsl(var(--background)), hsl(var(--background) / 0));
+}
+`.trim()
+
+export interface ScrollEdges {
+  /** There is content scrolled off to the left. */
+  left: boolean
+  /** There is content still unreached to the right. */
+  right: boolean
+}
+
+/**
+ * Which horizontal edges of a table's scroller still hide content.
+ *
+ * The persistent scrollbar above sits at the bottom of the scroller, and the
+ * scroller is the FULL HEIGHT of the table — measured 3061-5698px below the
+ * fold on every content view of the marketing-agents tenant at 900px tall. So a
+ * reader looking at the header row never sees it, and needs a hint that travels
+ * with them. This drives that hint.
+ *
+ * Pass a ref to the `<table>`, not to the scroller: `Table` forwards its ref to
+ * the table element, and the scroller is its parent.
+ */
+export function useScrollEdges(
+  tableRef: RefObject<HTMLTableElement | null>
+): ScrollEdges {
+  const [edges, setEdges] = useState<ScrollEdges>({ left: false, right: false })
+
+  useEffect(() => {
+    const table = tableRef.current
+    const scroller = table?.parentElement
+    if (!table || !scroller) return
+
+    const update = () => {
+      // 1px of slack: sub-pixel column widths leave scrollWidth a hair above
+      // clientWidth on tables that visually fit, and a hint under a table that
+      // fits is the same defect as a scrollbar under one.
+      const max = scroller.scrollWidth - scroller.clientWidth
+      const next: ScrollEdges = {
+        left: max > 1 && scroller.scrollLeft > 1,
+        right: max > 1 && scroller.scrollLeft < max - 1,
+      }
+      setEdges((prev) =>
+        prev.left === next.left && prev.right === next.right ? prev : next
+      )
+    }
+
+    update()
+    scroller.addEventListener('scroll', update, { passive: true })
+
+    let observer: ResizeObserver | undefined
+    if (typeof ResizeObserver !== 'undefined') {
+      // Observe the TABLE, not just the scroller. The scroller is `w-full`, so
+      // its own box does NOT change when a column is toggled, a filter narrows
+      // the data, or a page of rows re-sizes the auto-laid-out columns — only
+      // the table's box does. Watching the scroller alone misses every one of
+      // those and leaves the hint stale.
+      observer = new ResizeObserver(update)
+      observer.observe(table)
+      observer.observe(scroller)
+    }
+    window.addEventListener('resize', update)
+
+    return () => {
+      scroller.removeEventListener('scroll', update)
+      window.removeEventListener('resize', update)
+      observer?.disconnect()
+    }
+  }, [tableRef])
+
+  return edges
+}

package/src/components/ui/table.tsx

@@ -1,19 +1,49 @@
+'use client'
+
 import * as React from "react"
 
 import { cn } from "../../lib/utils"
+import { useInjectedStyle } from "../../lib/injected-style"
+import {
+  TABLE_SCROLLER_CLASS,
+  TABLE_SCROLL_CSS,
+  TABLE_SCROLL_STYLE_ID,
+} from "./table-scroll"
 
-const Table = React.forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
-    <table
-      ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
-      {...props}
-    />
-  </div>
-))
+export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
+  /**
+   * Classes for the scroll container that wraps the `<table>`. This div — not
+   * the `<table>` — is the element that actually scrolls horizontally, so
+   * anything that needs to change the scrolling box (a max-height, a different
+   * overflow) belongs here rather than in `className`.
+   */
+  containerClassName?: string
+}
+
+const Table = React.forwardRef<HTMLTableElement, TableProps>(
+  ({ className, containerClassName, ...props }, ref) => {
+    // Gives the scroller a scrollbar that is actually visible while it
+    // overflows. See table-scroll.ts for the measurements — in particular why
+    // `scrollbar-width` must NOT be added alongside it.
+    useInjectedStyle(TABLE_SCROLL_STYLE_ID, TABLE_SCROLL_CSS)
+
+    return (
+      <div
+        className={cn(
+          "relative w-full overflow-auto",
+          TABLE_SCROLLER_CLASS,
+          containerClassName
+        )}
+      >
+        <table
+          ref={ref}
+          className={cn("w-full caption-bottom text-sm", className)}
+          {...props}
+        />
+      </div>
+    )
+  }
+)
 Table.displayName = "Table"
 
 const TableHeader = React.forwardRef<

package/src/components/unified-table/__tests__/components/DataTableCore.scroll-affordance.test.tsx

@@ -0,0 +1,99 @@
+/**
+ * DataTableCore's edge hints (startsim-5pq7h).
+ *
+ * The persistent scrollbar restored on the `Table` primitive sits at the bottom
+ * of the scroller, and the scroller is as tall as the whole table — measured
+ * 3061-5698px BELOW THE FOLD on every content view of the marketing-agents
+ * tenant at a 900px-tall window. A reader at the header row never sees it, so
+ * the table also fades whichever edge still hides content.
+ *
+ * jsdom has no layout, so the geometry is stated outright below. These tests
+ * guard the WIRING and the "nothing overflows -> no decoration" contract; the
+ * visual claim is carried by browser measurement, not by them.
+ */
+import { render, screen } from '@testing-library/react'
+import { DataTableCore } from '../../components/DataTableCore'
+import { ColumnConfig } from '../../types'
+import { TABLE_EDGE_CLASS, TABLE_SHELL_CLASS } from '../../../ui/table-scroll'
+
+interface Row {
+  id: string
+  name: string
+}
+
+const data: Row[] = [
+  { id: '1', name: 'Abu Dhabi Off-Plan Mortgage Guide' },
+  { id: '2', name: 'UAE Capital Markets Fee Changes' },
+]
+
+const columns: ColumnConfig<Row>[] = [
+  { id: 'name', header: 'Name', accessorKey: 'name' },
+]
+
+/** Force the scroll container's geometry, which jsdom otherwise reports as 0/0. */
+function stubGeometry(clientWidth: number, scrollWidth: number) {
+  const original = {
+    clientWidth: Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'clientWidth'),
+    scrollWidth: Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'scrollWidth'),
+  }
+  Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
+    configurable: true,
+    get() {
+      return this.tagName === 'DIV' ? clientWidth : 0
+    },
+  })
+  Object.defineProperty(HTMLElement.prototype, 'scrollWidth', {
+    configurable: true,
+    get() {
+      return this.tagName === 'DIV' ? scrollWidth : 0
+    },
+  })
+  return () => {
+    if (original.clientWidth) Object.defineProperty(HTMLElement.prototype, 'clientWidth', original.clientWidth)
+    if (original.scrollWidth) Object.defineProperty(HTMLElement.prototype, 'scrollWidth', original.scrollWidth)
+  }
+}
+
+const edges = (container: HTMLElement) =>
+  container.querySelectorAll(`.${TABLE_EDGE_CLASS}`)
+
+describe('DataTableCore horizontal-scroll affordance', () => {
+  let restore: () => void = () => {}
+  afterEach(() => restore())
+
+  it('gives the table a non-scrolling shell for the hints to pin to', () => {
+    restore = stubGeometry(846, 846)
+    const { container } = render(
+      <DataTableCore data={data} columns={columns} getRowId={(r) => r.id} />
+    )
+    const table = screen.getByRole('table')
+    // The shell is the OUTER box; the element that scrolls is Table's own
+    // wrapper inside it. Pinning the hints to the scroller would make them
+    // scroll away with the content.
+    expect(container.querySelector(`.${TABLE_SHELL_CLASS}`)).toBe(
+      table.parentElement?.parentElement
+    )
+  })
+
+  it('renders no edge hint at all when every column fits', () => {
+    restore = stubGeometry(846, 846)
+    const { container } = render(
+      <DataTableCore data={data} columns={columns} getRowId={(r) => r.id} />
+    )
+    expect(edges(container)).toHaveLength(0)
+  })
+
+  it('fades the right edge when columns are unreached to the right', () => {
+    // /t/topic at a 1152px window: 846 visible, 1014 needed.
+    restore = stubGeometry(846, 1014)
+    const { container } = render(
+      <DataTableCore data={data} columns={columns} getRowId={(r) => r.id} />
+    )
+    const found = edges(container)
+    expect(found).toHaveLength(1)
+    expect(found[0]).toHaveClass('ss-table-edge-right')
+    // Decoration only — it must never intercept a click meant for the cell or
+    // the row-action menu underneath.
+    expect(found[0]).toHaveAttribute('aria-hidden', 'true')
+  })
+})

package/src/components/unified-table/components/DataTableCore/index.tsx

@@ -1,7 +1,14 @@
 'use client'
 
-import { ReactNode, useState, useCallback } from 'react'
+import { ReactNode, useState, useCallback, useRef } from 'react'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../ui/table'
+import {
+  useScrollEdges,
+  TABLE_SHELL_CLASS,
+  TABLE_EDGE_CLASS,
+  TABLE_EDGE_LEFT_CLASS,
+  TABLE_EDGE_RIGHT_CLASS,
+} from '../../../ui/table-scroll'
 import { Checkbox } from '../../../ui/checkbox'
 import { Button } from '../../../ui/button'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from '../../../ui/dropdown-menu'
@@ -91,6 +98,14 @@ export function DataTableCore<TData>({
   // State for tracking if a column is being dragged (to disable sorting during drag)
   const [isDraggingColumn, setIsDraggingColumn] = useState(false)
 
+  // The scrollbar restored in `Table` sits at the bottom of the scroller, and
+  // the scroller is as tall as the whole table — thousands of pixels below the
+  // fold on a full page of rows. These flags drive a fade at whichever edge
+  // still hides content, so the reader is told at the header row, not only at
+  // the very bottom of the page (startsim-5pq7h).
+  const tableRef = useRef<HTMLTableElement>(null)
+  const scrollEdges = useScrollEdges(tableRef)
+
   // Drag handlers
   const handleDragStart = useCallback((_: DragStart) => {
     setIsDraggingColumn(true)
@@ -334,8 +349,13 @@ export function DataTableCore<TData>({
   return (
     // overflow-x-auto: a wide table scrolls horizontally inside its own border
     // instead of overflowing the page to the right (startsim column-overflow).
-    <div className={cn('rounded-md border border-border overflow-x-auto', className)}>
-      <Table>
+    // NOTE: this div is not the element that ends up scrolling — `Table`'s own
+    // `overflow-auto` wrapper inside it is, because that wrapper is `w-full`
+    // and so never makes this one overflow. That is why the scrollbar styling
+    // and the ref below both target the inner wrapper. This div stays as the
+    // non-scrolling shell the edge hints are pinned to.
+    <div className={cn('rounded-md border border-border overflow-x-auto', TABLE_SHELL_CLASS, className)}>
+      <Table ref={tableRef}>
         {renderColumnHeaders()}
 
         <TableBody>
@@ -474,6 +494,17 @@ export function DataTableCore<TData>({
           )}
         </TableBody>
       </Table>
+
+      {/* Edge hints. Rendered only while that side actually hides something, so
+          a table that fits gets no decoration at all. `pointer-events: none`
+          keeps the rightmost column's cells and the row-action menu clickable
+          underneath. */}
+      {scrollEdges.left && (
+        <div aria-hidden="true" className={cn(TABLE_EDGE_CLASS, TABLE_EDGE_LEFT_CLASS)} />
+      )}
+      {scrollEdges.right && (
+        <div aria-hidden="true" className={cn(TABLE_EDGE_CLASS, TABLE_EDGE_RIGHT_CLASS)} />
+      )}
     </div>
   )
 }

package/src/lib/injected-style.ts

@@ -0,0 +1,41 @@
+import { useEffect } from 'react'
+
+/**
+ * Append a stylesheet to <head> exactly once per document, keyed by `id`.
+ *
+ * WHY THIS EXISTS instead of a .css file or Tailwind classes (startsim-5pq7h):
+ *
+ *  - @startsimpli/ui ships SOURCE (`main: ./src/index.ts`), and each consuming
+ *    app decides for itself whether Tailwind scans it. Four of the eleven apps
+ *    — crochet, recipe, workflows and raise — have no
+ *    `@source ".../@startsimpli/ui/src/**"` line in their globals.css, so a
+ *    Tailwind class written in this package emits no rule at all over there.
+ *  - The subpath CSS exports (`./gantt/styles`, `./workflows/styles`) only take
+ *    effect once the app adds an `@import`, which is a change in eleven repos.
+ *  - Pseudo-element rules (`::-webkit-scrollbar`) cannot be expressed as an
+ *    inline `style` prop.
+ *
+ * Injecting from the component is the only delivery that reaches every place
+ * the component actually renders.
+ */
+export function ensureInjectedStyle(id: string, css: string): void {
+  if (typeof document === 'undefined') return
+
+  const existing = document.getElementById(id)
+  if (existing) {
+    if (existing.textContent !== css) existing.textContent = css
+    return
+  }
+
+  const el = document.createElement('style')
+  el.id = id
+  el.textContent = css
+  document.head.appendChild(el)
+}
+
+/** React wrapper for {@link ensureInjectedStyle}. Safe to call from every instance. */
+export function useInjectedStyle(id: string, css: string): void {
+  useEffect(() => {
+    ensureInjectedStyle(id, css)
+  }, [id, css])
+}