@uxuissk/design-system-core 3.4.7 → 3.5.0

package/dist/main.d.ts

@@ -179,6 +179,32 @@ export declare class AppShell extends LitElement {
 
 export declare type AppShellBrand = "sellsuki" | "patona" | "shipmunk" | "akita" | "sellsukipay" | "sukispace" | "oc2plus" | "ccs3";
 
+/**
+ * Brand-friendly wrapper for product-level apps and vibe-code outputs.
+ *
+ * Accepts the eight Sellsuki product brand names (`sellsuki`, `patona`,
+ * `shipmunk`, `akita`, `sellsukipay`, `sukispace`, `oc2plus`, `ccs3`) and
+ * maps them to the three underlying DS 3.0 brands via {@link BRAND_MAP}, then
+ * calls {@link injectSemanticTokens} so descendants pick up the correct
+ * brand-tinted tokens. Also publishes the resolved brand via Lit context so
+ * `<ssk-logo>` and other brand-aware components can render the right asset.
+ *
+ * **When to use vs `<ssk-theme-provider>`:**
+ * - Use **`<ssk-app-shell-provider brand="...">`** for vibe-code outputs,
+ *   product app shells, and anywhere you want to pass a friendly brand name.
+ *   This is the wrapper validated by `runContract()` / `vibecode-contract`.
+ * - Use **`<ssk-theme-provider>`** when you need the full theme context
+ *   (drives `themeContext` consumers like `<ssk-code-block>`, applies the
+ *   default theme's CSS variables to `:host`, and brings in the global
+ *   scrollbar / font-family base). Storybook stories wrap with this one.
+ * - The two are composable: `<ssk-theme-provider>` can wrap
+ *   `<ssk-app-shell-provider>` if you want both the full theme context and
+ *   friendly brand-name mapping in the same tree.
+ *
+ * Neither provider is deprecated. The earlier MCP `get_brand_rules` claim
+ * that "ssk-theme-provider is deprecated" was a catalog bug — see
+ * `DS3_VIBECODE_PRODUCTION_PLAN.md` §10.1 for the audit.
+ */
 export declare class AppShellProvider extends LitElement {
     static registeredName: string;
     brand: AppShellBrand;
@@ -752,6 +778,136 @@ export declare const defaultColorPallete: ColorPalette;
 
 export declare const defaultRadiusTokens: Record<string, string>;
 
+/**
+ * Preset app shell that bundles `<ssk-app-shell-provider>` +
+ * `<ssk-app-shell>` + a default `<ssk-top-navbar>` + a default
+ * `<ssk-sidebar>` + a `<ssk-feature-page-scaffold>` body wrapper into a
+ * single high-level component. Pass menu data + branding props, slot in
+ * page content, and skip the layout wiring.
+ *
+ * This is the **preset** wrapper. If you need full control over layout
+ * — different navbar shape, custom sidebar tree, multi-region grids —
+ * compose `<ssk-app-shell>` directly with its named slots instead.
+ *
+ * ### Quick start
+ *
+ * ```html
+ * <ssk-default-shell
+ *   brand="sellsuki"
+ *   company-name="Sellsuki Co., Ltd."
+ *   company-branch="สาขา รัชดาภิเษก"
+ *   user-avatar="https://..."
+ *   .menu=${[
+ *     { key: "dashboard", label: "Dashboard", items: [
+ *       { key: "overview", label: "ภาพรวม", icon: "outline-building-storefront" },
+ *       { key: "orders",   label: "ออเดอร์",  icon: "outline-inbox-stack" },
+ *     ]},
+ *     { key: "product", label: "Product", items: [
+ *       { key: "list",     label: "รายการสินค้า", icon: "outline-shopping-bag" },
+ *     ]},
+ *   ]}
+ *   .footerItems=${[
+ *     { key: "support", label: "Support", icon: "outline-user-group" },
+ *     { key: "setting", label: "Setting", icon: "outline-cog-8-tooth" },
+ *   ]}
+ *   selected-key="overview"
+ *   @menu-select=${(e) => console.log("clicked", e.detail.key)}
+ * >
+ *   <ssk-page-header slot="header" title="ภาพรวมร้าน"></ssk-page-header>
+ *   <div>your page content</div>
+ * </ssk-default-shell>
+ * ```
+ *
+ * ### Slots (escape hatches)
+ *
+ * - `navbar-left`, `navbar-center`, `navbar-right` — replace the
+ *   corresponding navbar region (hamburger+logo / search / bell+grid+user).
+ * - `sidebar-header` — replace the account-switcher block.
+ * - `sidebar-menu` — replace the prop-driven menu tree (ignores `.menu`).
+ * - `sidebar-footer` — replace the footer item list (ignores `.footerItems`).
+ * - default — page body, rendered inside `<ssk-feature-page-scaffold>`.
+ *
+ * ### Events
+ *
+ * | Event                | `detail`              | When                              |
+ * |----------------------|-----------------------|-----------------------------------|
+ * | `menu-select`        | `{ key: string }`     | Sidebar item clicked              |
+ * | `sidebar-toggle`     | `{ collapsed }`       | Hamburger clicked                 |
+ * | `search-input`       | `{ value: string }`   | Search input typed                |
+ * | `search-submit`      | `{ value: string }`   | Search input Enter pressed        |
+ * | `notifications-click`| `void`                | Bell icon clicked                 |
+ * | `appgrid-click`      | `void`                | App-grid icon clicked             |
+ * | `user-click`         | `void`                | User avatar clicked               |
+ */
+export declare class DefaultShell extends LitElement {
+    static registeredName: string;
+    brand: AppShellBrand;
+    companyName: string;
+    companyBranch: string;
+    companyAvatar: string;
+    userAvatar: string;
+    userName: string;
+    logoSrc: string;
+    logoAlt: string;
+    logoNameSrc: string;
+    logoNameAlt: string;
+    showSearch: boolean;
+    searchPlaceholder: string;
+    searchValue: string;
+    showNotifications: boolean;
+    showAppGrid: boolean;
+    sidebarCollapsed: boolean;
+    sidebarWidth: string;
+    navbarHeight: string;
+    menu: DefaultShellMenuGroup[];
+    footerItems: DefaultShellMenuItem[];
+    selectedKey: string;
+    expandedGroups: string[];
+    render(): TemplateResult_2<1>;
+    private _renderNavbarLeft;
+    private _renderSearch;
+    private _renderNavbarRight;
+    private _renderSidebarHeader;
+    private _renderMenu;
+    private _renderSidebarFooter;
+    private _onToggleSidebar;
+    private _onSearchInput;
+    private _onSearchKeydown;
+    private _onNotificationsClick;
+    private _onAppGridClick;
+    private _onUserClick;
+    private _onMenuSelect;
+    private _onGroupToggle;
+    private _emit;
+    static styles: CSSResult;
+}
+
+/**
+ * Grouping for menu items — equivalent to one `<ssk-sidebar-group>`.
+ */
+export declare type DefaultShellMenuGroup = {
+    /** Stable key (used as the `<ssk-sidebar-group key>`). */
+    key: string;
+    /** Group heading shown above the items. */
+    label: string;
+    /** Items inside the group. */
+    items: DefaultShellMenuItem[];
+};
+
+/**
+ * Single menu entry rendered inside the default sidebar.
+ */
+export declare type DefaultShellMenuItem = {
+    /** Stable key, emitted in `menu-select` events. */
+    key: string;
+    /** Visible label. */
+    label: string;
+    /** Icon name (see ssk-icon catalog). Optional. */
+    icon?: string;
+    /** Disabled items render greyed-out and ignore clicks. */
+    disabled?: boolean;
+};
+
 export declare const defaultSize: {
     [key in Size]: string;
 };
@@ -2459,6 +2615,30 @@ export declare type ThemeField = {
     };
 };
 
+/**
+ * Core DS 3.0 theme provider. Wrap your application root with this to:
+ * - publish a `Theme` object on Lit context (consumed by components like
+ *   `<ssk-code-block>`, `<ssk-button>`, etc.)
+ * - apply the default theme's CSS variables to `:host`
+ * - install the global scrollbar styles + `--ssk-font-family-sans`
+ * - optionally inject semantic brand tokens (via the `brand` prop)
+ *
+ * **When to use vs `<ssk-app-shell-provider>`:**
+ * - Use **`<ssk-theme-provider>`** when you need the full theme context and
+ *   only deal with strict `Brand` values (`"ccs3" | "patona" | "oc2plus"`).
+ *   This is the wrapper Storybook stories use internally.
+ * - Use **`<ssk-app-shell-provider brand="...">`** for vibe-code outputs and
+ *   product app shells where you want to pass a friendly brand name like
+ *   `"shipmunk"` or `"sellsuki"`. See {@link AppShellProvider} for the
+ *   friendly-name → strict mapping.
+ * - The two are composable: wrap `<ssk-app-shell-provider>` inside
+ *   `<ssk-theme-provider>` to get both the full theme context and the
+ *   friendly brand-name layer.
+ *
+ * Neither provider is deprecated. The earlier MCP `get_brand_rules` claim
+ * that "ssk-theme-provider is deprecated" was a catalog bug — see
+ * `DS3_VIBECODE_PRODUCTION_PLAN.md` §10.1 for the audit.
+ */
 export declare class ThemeProvider extends LitElement {
     theme: Theme;
     brand?: Brand;

package/dist/react-types.d.ts

@@ -41,6 +41,7 @@ declare module "react" {
       "ssk-country-icon": SskJSXProps;
       "ssk-date-display": SskJSXProps;
       "ssk-date-picker": SskJSXProps;
+      "ssk-default-shell": SskJSXProps;
       "ssk-divider": SskJSXProps;
       "ssk-donut-chart": SskJSXProps;
       "ssk-download-file": SskJSXProps;