@imfusion/web-ui 0.10.1-dev.49.geca9b5e8 → 0.10.1-dev.53.gea04219d

package/CHANGELOG.md

@@ -60,9 +60,13 @@ never changes the character width, so columns stay aligned. CoFo Sans Mono still
 
 ### Added
 
+- `--imf-ui-size-backdrop-edge` (`38%`) and `--imf-ui-size-backdrop-band-height` (`30dvh`) are the public backdrop's geometry tokens. The `imf-web-ui-ux` skill describes the handover. — Nikolaus Brunner <brunner@imfusion.com>
+- `ProductLogo` renders the ImFusion Labels, Suite, and SDK product logos on the `Logo` sizes and color variants. The name is solid by default and cut out of the plate with `cutout`. [Product](src/components/logo/product/product.stories.tsx#Default) — Nikolaus Brunner <brunner@imfusion.com>
 - `imf-web-ui-update` proposes and `imf-web-ui-audit` reports aligning the core runtime packages (React, Base UI, Vite+) with the versions Web UI builds with. — Nikolaus Brunner <brunner@imfusion.com>
 - `localWebUILink()` and a `paths` block in `tsconfig.json` let an app run against a symlinked web-ui checkout with one React and one set of types. `imf-web-ui-setup` proposes both and `imf-web-ui-audit` reports a missing one. — Nikolaus Brunner <brunner@imfusion.com>
 - The shell's navigation toggle sets `aria-controls` from the navbar, and reads the `id` the navbar generates. A consumer `id` on the Navbar is what it points at. — Nikolaus Brunner <brunner@imfusion.com>
+- `Table.Root` takes `density` (`compact`, `comfortable`, `spacious`) for the cell padding. — Nikolaus Brunner <brunner@imfusion.com>
+- `Table.HeaderCell` and `Table.Cell` take `action` for a column of buttons: it shrinks to its content, so the data columns keep the width. — Nikolaus Brunner <brunner@imfusion.com>
 - [`useDisclosure`](src/hooks/use-disclosure.stories.tsx#UseDisclosure) keeps an open state that works controlled or uncontrolled, and returns `open`, `setOpen`, and `toggle`. — Nikolaus Brunner <brunner@imfusion.com>
 - `AppShell.Navbar` and `AppShell.Aside` take `defaultOpen` and keep their own open state when `open` is omitted, and close an uncontrolled drawer when they dock. A controlled `open` is never changed by docking. — Nikolaus Brunner <brunner@imfusion.com>
 - An `AppShell.Aside` opens from the consumer's state, such as a row selection, through `open` and `onOpenChange`. — Nikolaus Brunner <brunner@imfusion.com>
@@ -106,6 +110,8 @@ never changes the character width, so columns stay aligned. CoFo Sans Mono still
 
 ### Changed
 
+- The `Meter` track is translucent ink (8% `fg-main`), so it stays visible on tinted surfaces such as a selected table row. — Nikolaus Brunner <brunner@imfusion.com>
+- `Table` reads lighter: the header has no band, its mono labels are muted with a 1px rule under them, body rows have no rules, and cells get more vertical padding. A selected row sits one neutral step darker than a hovered row, in place of the primary tint. — Nikolaus Brunner <brunner@imfusion.com>
 - [`AppShell.Header`](src/components/app-shell/app-shell.mdx) is a page row that shows at every width, below the shell's bar on mobile. — Nikolaus Brunner <brunner@imfusion.com>
   - The header pads its inline sides with `--imf-ui-appshell-padding`, so its content lines up with Main's.
 - AppShell — Nikolaus Brunner <brunner@imfusion.com>

package/dist/components/logo/index.d.ts

@@ -1,3 +1,4 @@
 export { Logo } from './logo';
 export { logoMeta } from './logo.meta';
 export { ImFusionLogo } from './imfusion';
+export { ProductLogo } from './product';

package/dist/components/logo/product/index.d.ts

@@ -0,0 +1 @@
+export { ProductLogo } from './product';

package/dist/components/logo/product/marks.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Product logo geometry. The plate is shared; each product adds its name as a separate path so the
+ * name can be filled on its own or cut out of the plate. Not exported from the package.
+ */
+export declare const productViewBox = "0 0 842.21 335.39";
+export declare const productPlate = "M842.21,99.26L742.95,0L0,0L0,236.13L99.26,335.39L842.21,335.39Z";
+export declare const productWords: {
+    labels: string;
+    suite: string;
+    sdk: string;
+};

package/dist/components/logo/product/product.d.ts

@@ -0,0 +1,17 @@
+import { Logo } from '../logo';
+import { productWords } from './marks';
+type LogoVariant = NonNullable<React.ComponentProps<typeof Logo>["variant"]>;
+type Props = Omit<React.ComponentProps<typeof Logo>, "src" | "alt" | "variant"> & {
+    product: keyof typeof productWords;
+    /** Cut the product name out of the plate so the background shows through. */
+    cutout?: boolean;
+    /** Override the accessible label. Defaults to the product name, e.g. "ImFusion SDK". */
+    alt?: string;
+    variant?: Exclude<LogoVariant, "minor">;
+};
+/**
+ * An ImFusion product logo (Labels, Suite, SDK) — the generic {@link Logo} primitive pre-wired
+ * with the product plate. The name is filled to contrast with the plate unless `cutout` is set.
+ */
+export declare function ProductLogo({ product, cutout, alt, variant, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/table/table.d.ts

@@ -1,7 +1,15 @@
 import { useRender } from '@base-ui/react/use-render';
-type HeaderCellProps = React.ComponentProps<"th">;
+type CellActionProps = {
+    /** Marks an action column: it shrinks to its content and keeps it on one line. */
+    action?: boolean;
+};
+type HeaderCellProps = React.ComponentProps<"th"> & CellActionProps;
+type RootProps = React.ComponentProps<"table"> & {
+    /** Cell padding: `compact` for dense data, `spacious` for a few rows at a glance. */
+    density?: "compact" | "comfortable" | "spacious";
+};
 /** Table.Root — the `<table>` element. */
-export declare function Root(props: React.ComponentProps<"table">): import("react/jsx-runtime").JSX.Element;
+export declare function Root({ density, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Root {
     var displayName: string;
 }
@@ -21,12 +29,12 @@ export declare namespace Row {
     var displayName: string;
 }
 /** Table.HeaderCell — a `<th>` header cell. */
-export declare function HeaderCell(props: HeaderCellProps): import("react/jsx-runtime").JSX.Element;
+export declare function HeaderCell({ action, ...props }: HeaderCellProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace HeaderCell {
     var displayName: string;
 }
 /** Table.Cell — a `<td>` data cell. */
-export declare function Cell(props: React.ComponentProps<"td">): import("react/jsx-runtime").JSX.Element;
+export declare function Cell({ action, ...props }: React.ComponentProps<"td"> & CellActionProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Cell {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -42,7 +42,7 @@ export { Tabs, tabsMeta } from './components/tabs';
 export { Toast, toastMeta } from './components/toast';
 export { Tooltip, tooltipMeta } from './components/tooltip';
 export { Typo, typoMeta } from './components/typo';
-export { ImFusionLogo } from './components/logo';
+export { ImFusionLogo, ProductLogo } from './components/logo';
 export { WebUIProvider } from './provider';
 export { useClipboard, useColorScheme, useDisclosure, useMediaQuery } from './hooks';
 export type { UseClipboardOptions, UseDisclosureOptions, UseMediaQueryOptions } from './hooks';