@imfusion/web-ui 0.11.1-dev.88.gafff02ef → 0.11.1-dev.96.g0ff5ca96

package/CHANGELOG.md

@@ -10,6 +10,21 @@
 
 ### Added
 
+- `ProductLogo` takes `compact` to fold into a square mark with the product's initial in place; changing it animates the
+  fold. Inside the AppShell rail the navbar folds it while the rail is closed, centered on the icons.
+  [Compact](src/components/logo/product/product.stories.tsx#Compact),
+  [RailProductLogo](src/components/app-shell/app-shell.stories.tsx#RailProductLogo)
+  ([WEBSDK-307](https://imfusion.atlassian.net/browse/WEBSDK-307)) — Nikolaus Brunner <brunner@imfusion.com>
+- `AppShell.Navbar` takes `mark`, a compact form for a custom logo that cannot fold, shown while the rail is closed.
+  Without one, such a logo fades out of the closed rail instead of being cut. — Nikolaus Brunner <brunner@imfusion.com>
+- `AppShell.Navbar` takes `collapse` to put the navbar away. With `"hidden"` it waits behind the page, and a panel toggle in
+  a 4rem column at the start opens it; with `"rail"` that column shows its icons, each named in a tooltip, with a mark under
+  the current page. Opening recedes the page to an inset card and slides the navbar in; a tap on the page, Escape, or a
+  followed link closes it, and focus returns to the toggle. Below md both open full screen. `openLabel` and `closeLabel`
+  name the toggle, and `--imf-ui-appshell-recede-open` and `--imf-ui-appshell-recede-close` set the motion.
+  `useAppShellNavbar()` reads and sets the navbar's open state from app code. The default, `collapse="none"`, is unchanged.
+  [Hidden](src/components/app-shell/app-shell.stories.tsx#Hidden), [Rail](src/components/app-shell/app-shell.stories.tsx#Rail)
+  ([WEBSDK-307](https://imfusion.atlassian.net/browse/WEBSDK-307)) — Nikolaus Brunner <brunner@imfusion.com>
 - `RichLink` takes `size="sm"` for dense lists: 6px block padding, a 32px tile, and a closer gap between glyph and text. The default `md` is unchanged.
   [RichLink](src/components/rich-link/rich-link.mdx) — Nikolaus Brunner <brunner@imfusion.com>
 - `Code.Inline` takes `concealable` to hide its content behind an eye button, hidden by default. `concealed` and

package/dist/components/app-shell/app-shell-context.d.ts

@@ -0,0 +1,25 @@
+/** What a closed navbar leaves on screen from `md` up: docked (`none`), only its toggle (`hidden`), or its icon rail. */
+export type Collapse = "none" | "hidden" | "rail";
+type Disclosure = {
+    id: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+};
+export type NavbarSection = Disclosure & {
+    variant: "default" | "branded";
+    logo: React.ReactNode;
+    collapse: Collapse;
+    openLabel: string;
+    closeLabel: string;
+};
+export type Sections = {
+    navbar?: NavbarSection;
+};
+export declare const ShellContext: import('react').Context<HTMLDivElement | null>;
+export declare const BackstageContext: import('react').Context<HTMLDivElement | null>;
+export declare const SectionsContext: import('react').Context<{
+    sections: Sections;
+    setSections: React.Dispatch<React.SetStateAction<Sections>>;
+}>;
+export declare const InClosingNavbarContext: import('react').Context<boolean>;
+export {};

package/dist/components/app-shell/app-shell.d.ts

@@ -1,5 +1,6 @@
 import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
+import { Collapse } from './app-shell-context';
 declare const navbarSurface: (props?: ({
     variant?: "default" | "branded" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
@@ -49,6 +50,21 @@ type NavbarProps = React.ComponentProps<"nav"> & VariantProps<typeof navbarSurfa
     logo?: React.ReactNode;
     /** The signed-in account at the foot of the rail, usually an `AccountCard`. Without it the foot is omitted. */
     account?: React.ReactNode;
+    /**
+     * What a closed navbar leaves on screen from `md` up. `none` docks it and never closes; `hidden` leaves only the
+     * shell's toggle; `rail` leaves its icon rail. Opening a collapsing navbar recedes the page in front of it.
+     */
+    collapse?: Collapse;
+    /**
+     * The logo's compact form, shown in place of `logo` while the rail is closed. A `ProductLogo` folds into its compact
+     * form by itself and needs none; the default logo brings the ImFusion glyph; any other logo without a mark fades
+     * out of the closed rail.
+     */
+    mark?: React.ReactNode;
+    /** Accessible name of the shell's toggle while the navbar is closed. */
+    openLabel?: string;
+    /** Accessible name of the shell's toggle while the navbar is open, and of the page cover that closes it. */
+    closeLabel?: string;
 };
 /**
  * The navbar owns its frame: `logo` on top, the children (nav items) in the middle, `account` at the foot. Without a
@@ -56,7 +72,7 @@ type NavbarProps = React.ComponentProps<"nav"> & VariantProps<typeof navbarSurfa
  * color; children opt into on-color themselves. Below `md` the navbar opens as a drawer from the inline start, with its
  * close on the logo row.
  */
-declare function Navbar({ variant, open, defaultOpen, onOpenChange, logo, account, children, id, ...props }: NavbarProps): import("react/jsx-runtime").JSX.Element;
+declare function Navbar({ variant, open, defaultOpen, onOpenChange, logo, account, mark, collapse, openLabel, closeLabel, children, id, ...props }: NavbarProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace Navbar {
     var displayName: string;
 }
@@ -102,7 +118,7 @@ type NavItemProps = useRender.ComponentProps<"a"> & {
  * `aria-current="page"` underlines the label. Pass a router link through `render`. Followed inside the navbar drawer,
  * it closes the drawer.
  */
-declare function NavItem({ icon, description, children, render, onClick, ...props }: NavItemProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+declare function NavItem({ icon, description, children, render, onClick, ...props }: NavItemProps): import("react/jsx-runtime").JSX.Element;
 declare namespace NavItem {
     var displayName: string;
 }

package/dist/components/app-shell/index.d.ts

@@ -1,2 +1,3 @@
 export * as AppShell from './app-shell';
 export { appShellMeta } from './app-shell.meta';
+export { useAppShellNavbar } from './use-app-shell-navbar';

package/dist/components/app-shell/use-app-shell-navbar.d.ts

@@ -0,0 +1,11 @@
+import { Collapse } from './app-shell-context';
+/**
+ * Reads and drives the AppShell navbar from anywhere inside `AppShell.Root`, such as opening it to point at something.
+ * `setOpen` goes through the navbar's `onOpenChange`, so it works for a controlled navbar too. A docked navbar
+ * (`collapse="none"`) only opens below `md`, where it is a drawer.
+ */
+export declare function useAppShellNavbar(): {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    collapse: Collapse;
+};

package/dist/components/logo/product/compact-context.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Lets a container fold the product logos inside it, such as the AppShell rail. `claim` tells the container that a logo
+ * folds itself, so it does not have to hide or swap it.
+ */
+export declare const CompactLogoContext: import('react').Context<{
+    compact: boolean;
+    claim: () => void;
+} | null>;

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

@@ -9,3 +9,30 @@ export declare const productWords: {
     suite: string;
     sdk: string;
 };
+/**
+ * The plate in three pieces that fold the full logo into its compact square: the start with its chamfer, a middle that
+ * shrinks, and the end with its chamfer, which slides in by 506.82 units (`product.module.css`). The pieces overlap so no seam shows.
+ */
+export declare const productFoldPieces: {
+    start: string;
+    middle: {
+        x: number;
+        width: number;
+    };
+    end: string;
+};
+/** The compact square: the plate's chamfers on a square, for the cut-out compact form. */
+export declare const productCompactViewBox = "0 0 335.39 335.39";
+export declare const productCompactPlate = "M335.39,99.26L236.13,0L0,0L0,236.13L99.26,335.39L335.39,335.39Z";
+/** Each product's initial, where its wordmark has it; the compact form keeps only this glyph. */
+export declare const productInitials: {
+    labels: string;
+    suite: string;
+    sdk: string;
+};
+/** The rest of each wordmark after its initial; it fades out as the logo folds. */
+export declare const productWordRests: {
+    labels: string;
+    suite: string;
+    sdk: string;
+};

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

@@ -5,6 +5,11 @@ 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;
+    /**
+     * Fold to the square mark with the product's initial, for tight spaces. Changing it animates the fold. Inside the
+     * AppShell rail the navbar sets it while the rail is closed.
+     */
+    compact?: boolean;
     /** Override the accessible label. Defaults to the product name, e.g. "ImFusion SDK". */
     alt?: string;
     variant?: Exclude<LogoVariant, "minor">;
@@ -13,5 +18,5 @@ type Props = Omit<React.ComponentProps<typeof Logo>, "src" | "alt" | "variant">
  * 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 declare function ProductLogo({ product, cutout, compact, alt, variant, size, height, style, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.d.ts

@@ -19,7 +19,7 @@ export { Switch, switchMeta } from './components/switch';
 export { Textarea, textareaMeta } from './components/textarea';
 export { Toggle, toggleMeta } from './components/toggle';
 export { ToggleGroup, toggleGroupMeta } from './components/toggle-group';
-export { AppShell, appShellMeta } from './components/app-shell';
+export { AppShell, appShellMeta, useAppShellNavbar } from './components/app-shell';
 export { Card, cardMeta } from './components/card';
 export { Dialog, dialogMeta } from './components/dialog';
 export { Drawer, drawerMeta } from './components/drawer';