@close-by/clay 0.2.5 → 0.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@close-by/clay",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "NiceGUI-like ui.* facade for Clay apps",
   "license": "MIT",
   "type": "module",
@@ -27,10 +27,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@close-by/clay-compiler": "0.2.5",
-    "@close-by/clay-core": "0.2.5",
-    "@close-by/clay-components": "0.2.5",
-    "@close-by/clay-server": "0.2.5",
+    "@close-by/clay-compiler": "0.2.7",
+    "@close-by/clay-core": "0.2.7",
+    "@close-by/clay-components": "0.2.7",
+    "@close-by/clay-server": "0.2.7",
     "@tailwindcss/cli": "^4.3.3",
     "tailwindcss": "^4.3.3"
   }

package/src/index.ts

@@ -27,6 +27,8 @@ import {
   icon as iconFactory,
   iconText as iconTextFactory,
   statusDot as statusDotFactory,
+  feedRow as feedRowFactory,
+  feedList as feedListFactory,
   stat as statFactory,
   dataTable as dataTableFactory,
   areaChart as areaChartFactory,
@@ -129,6 +131,12 @@ import {
   type IconSlotProps,
   type StatusDotProps,
   type StatusDotColor,
+  type FeedRowProps,
+  type FeedRowStatus,
+  type FeedListProps,
+  type FeedRowProps,
+  type FeedRowStatus,
+  type FeedListProps,
   type StatItem,
   type DataTableProps,
   type DataTableAction,
@@ -841,6 +849,24 @@ export function statusDot(props?: StatusDotProps): Element {
   return statusDotFactory(props);
 }
 
+/** Bordered container for live feed rows. See {@link FeedListProps}. */
+export function feedList(props: FeedListProps, fn: () => void): Element;
+export function feedList(fn: () => void): Element;
+export function feedList(
+  propsOrFn: FeedListProps | (() => void),
+  fn?: () => void,
+): Element {
+  if (typeof propsOrFn === 'function') {
+    return feedListFactory(propsOrFn);
+  }
+  return feedListFactory(propsOrFn, fn!);
+}
+
+/** One live-feed row (status, link title, meta/issue, trailing time). See {@link FeedRowProps}. */
+export function feedRow(props: FeedRowProps, footer?: () => void): Element {
+  return feedRowFactory(props, footer);
+}
+
 /** Render markdown to HTML. Prefer `ui.markdown`. See {@link MarkdownProps}. */
 export function markdown(text?: string, props?: MarkdownProps): Element {
   return markdownFactory(text, props);
@@ -1594,6 +1620,10 @@ export const ui = {
   progress,
   separator,
   icon,
+  iconText,
+  statusDot,
+  feedRow,
+  feedList,
   markdown,
   html,
   image,

package/src/pages.ts

@@ -58,6 +58,10 @@ export type PageMeta = {
    * UX only — still call `requireRole` in the page builder.
    */
   roles?: string[];
+  /** Nest this page under a collapsible sidebar group with the given label. */
+  group?: string;
+  /** Lucide icon for the group parent row (first page in the group with this set wins). */
+  groupIcon?: string;
 };
 
 const pageMetaByPath = new Map<string, PageMeta>();
@@ -140,8 +144,76 @@ export type NavFromPagesOptions = {
   role?: string;
   /** Viewer roles — page is shown if it has no `roles` meta, or any overlap. */
   roles?: string[];
+  /**
+   * When true, nest `/examples/*` routes (except `/examples/auth`) under an
+   * "Examples" group. Individual pages can override with `pageMeta.group`.
+   */
+  groupExamples?: boolean;
+  /** Label for the auto examples group. Default `"Examples"`. */
+  groupExamplesLabel?: string;
+  /** Icon for the auto examples group. Default `"layout-grid"`. */
+  groupExamplesIcon?: string;
 };
 
+type RankedNavPage = {
+  href: string;
+  label: string;
+  icon: string;
+  order: number;
+  group?: string;
+  groupIcon?: string;
+};
+
+function resolvePageGroup(
+  href: string,
+  meta: PageMeta,
+  opts?: NavFromPagesOptions,
+): { group?: string; groupIcon?: string } {
+  if (meta.group !== undefined) {
+    return meta.group ? { group: meta.group, groupIcon: meta.groupIcon } : {};
+  }
+  if (opts?.groupExamples && href.startsWith('/examples/') && href !== '/examples/auth') {
+    return {
+      group: opts.groupExamplesLabel ?? 'Examples',
+      groupIcon: opts.groupExamplesIcon ?? 'layout-grid',
+    };
+  }
+  return {};
+}
+
+function buildNavFromRanked(ranked: RankedNavPage[]): AppNavItem[] {
+  const top: Array<{ order: number; node: AppNavItem }> = [];
+  const groups = new Map<string, AppNavItem>();
+
+  for (const row of ranked) {
+    const leaf: AppNavItem = { label: row.label, href: row.href, icon: row.icon };
+    if (!row.group) {
+      top.push({ order: row.order, node: leaf });
+      continue;
+    }
+
+    let parent = groups.get(row.group);
+    if (!parent) {
+      parent = {
+        label: row.group,
+        href: row.href,
+        icon: row.groupIcon ?? 'folder',
+        items: [],
+      };
+      groups.set(row.group, parent);
+      top.push({ order: row.order, node: parent });
+    } else {
+      const entry = top.find((t) => t.node === parent);
+      if (entry) entry.order = Math.min(entry.order, row.order);
+      if (row.groupIcon && parent.icon === 'folder') parent.icon = row.groupIcon;
+    }
+    parent.items!.push(leaf);
+  }
+
+  top.sort((a, b) => a.order - b.order || a.node.label.localeCompare(b.node.label));
+  return top.map((t) => t.node);
+}
+
 /**
  * Build primary sidebar nav from registered pages + collected `pageMeta`.
  * Filters by `nav: false` and optional role overlap; sorts by `order` then path.
@@ -160,10 +232,11 @@ export function navFromPages(opts?: NavFromPagesOptions): AppNavItem[] {
   }
 
   const paths = getRegisteredPaths();
-  const ranked = paths
+  const ranked: RankedNavPage[] = paths
     .map((href) => {
       const meta = pageMetaByPath.get(href) ?? {};
       const order = href === '/' ? 0 : (meta.order ?? 100);
+      const { group, groupIcon } = resolvePageGroup(href, meta, opts);
       return {
         href,
         label: meta.label ?? labelFromPath(href),
@@ -171,6 +244,8 @@ export function navFromPages(opts?: NavFromPagesOptions): AppNavItem[] {
         order,
         nav: meta.nav !== false,
         roles: meta.roles,
+        group,
+        groupIcon,
       };
     })
     .filter((item) => {
@@ -178,9 +253,10 @@ export function navFromPages(opts?: NavFromPagesOptions): AppNavItem[] {
       if (!item.roles || item.roles.length === 0) return true;
       if (viewer.size === 0) return false;
       return item.roles.some((r) => viewer.has(r));
-    });
+    })
+    .map(({ nav: _nav, roles: _roles, ...rest }) => rest);
   ranked.sort((a, b) => a.order - b.order || a.href.localeCompare(b.href));
-  return ranked.map(({ href, label, icon }) => ({ href, label, icon }));
+  return buildNavFromRanked(ranked);
 }
 
 /** Test helper: clear page registry + meta map. */