@softov/scena 0.1.2 → 0.1.3

package/dist/ui/navigation/ActivityBarItem.css

@@ -0,0 +1,81 @@
+.oo-activity-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: var(--oo-activity-item-size, 44px);
+  height: var(--oo-activity-item-size, 44px);
+  padding: 0;
+  border: none;
+  /* The active marker is a border that is always present and usually
+   * transparent, so nothing shifts by 2px when it appears. */
+  border-inline-start: 2px solid transparent;
+  border-radius: 0;
+  background: var(--oo-activitybar-bg, transparent);
+  color: var(--oo-activitybar-fg);
+  font: inherit;
+  font-size: var(--oo-activity-item-icon-size, 18px);
+  line-height: 1;
+  cursor: pointer;
+  user-select: none;
+}
+
+.oo-activity-item:hover {
+  color: var(--oo-activitybar-fg-hover);
+  background: var(--oo-activitybar-bg-hover);
+}
+
+.oo-activity-item:focus-visible {
+  outline: 2px solid var(--oo-color-accent);
+  outline-offset: -2px;
+}
+
+.oo-activity-item[data-active='true'] {
+  color: var(--oo-activitybar-fg-active);
+  background: var(--oo-activitybar-bg-active);
+  border-inline-start-color: var(--oo-color-accent);
+}
+
+/* The rail layout stacks these; `bottom` pushes an entry to the far end. */
+.oo-activity-item[data-pos='bottom'] {
+  margin-block-start: auto;
+}
+
+.oo-activity-item__badge {
+  position: absolute;
+  inset-inline-end: 3px;
+  inset-block-end: 3px;
+  min-width: 15px;
+  padding: 0 3px;
+  border-radius: var(--oo-radius-full);
+  font-size: 10px;
+  line-height: 15px;
+  text-align: center;
+  /* So a count that ticks 9 → 10 → 11 does not shuffle the digits sideways. */
+  font-variant-numeric: tabular-nums;
+}
+
+/* Background and the ink that stays readable on it, paired rather than one
+ * colour with a fixed foreground: the accent is a pale tint in most dark
+ * themes and wants dark text, while the status colours are saturated
+ * mid-tones in both modes and want light text. */
+.oo-activity-item__badge {
+  background: var(--oo-color-accent);
+  color: var(--oo-color-canvas);
+}
+
+.oo-activity-item__badge[data-tone='info']    { background: var(--oo-color-info);    color: var(--oo-color-inverse); }
+.oo-activity-item__badge[data-tone='danger']  { background: var(--oo-color-danger);  color: var(--oo-color-inverse); }
+.oo-activity-item__badge[data-tone='warning'] { background: var(--oo-color-warning); color: var(--oo-color-inverse); }
+.oo-activity-item__badge[data-tone='success'] { background: var(--oo-color-success); color: var(--oo-color-inverse); }
+.oo-activity-item__badge[data-tone='muted']   { background: var(--oo-color-muted);   color: var(--oo-color-inverse); }
+
+/* The second count goes in the opposite corner, so the two never overlap and
+ * neither has to move when the other appears. A ring in the rail's own colour
+ * keeps it legible where it crosses the icon. */
+.oo-activity-item__badge--second {
+  inset-block-end: auto;
+  inset-block-start: 3px;
+  box-shadow: 0 0 0 2px var(--oo-activitybar-bg, var(--oo-color-canvas));
+}

package/dist/ui/navigation/ActivityBarItem.d.ts

@@ -0,0 +1,61 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { BindingPath } from '../../sdk/component-graph.js';
+import './ActivityBarItem.css';
+/**
+ * What a badge means, which is not always "there are things".
+ *
+ * A count of items waiting and a count of hosts that fell over are not the same
+ * news, and one accent colour said they were. The tone is a second channel
+ * beside the number, never the only one: the count is always written, and
+ * `badgeLabel` says what it counts.
+ */
+export type ActivityBadgeTone = 'accent' | 'info' | 'danger' | 'warning' | 'success' | 'muted';
+export interface ActivityBarItemProps {
+    icon?: string;
+    label?: string;
+    section?: string;
+    sectionPath?: BindingPath;
+    pos?: 'top' | 'bottom';
+    badge?: string | number;
+    badgeTone?: ActivityBadgeTone;
+    badgeLabel?: string;
+    /**
+     * A second count, in the opposite corner.
+     *
+     * Two badges only where a section really answers two questions somebody acts
+     * on differently — a list of live agent sessions is the case: how many are
+     * working right now, and how many finished without anybody reading them. One
+     * is activity, the other is a backlog, and collapsing them into a sum would
+     * name neither.
+     *
+     * Kept to two. A third would be a chart on a 44-pixel icon.
+     */
+    secondBadge?: string | number;
+    secondBadgeTone?: ActivityBadgeTone;
+    secondBadgeLabel?: string;
+    command?: string;
+    args?: Record<string, unknown>;
+    onClick?: () => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * An entry in the activity bar.
+ *
+ * Every app on scena has written this, and it is the same component each time:
+ * an icon, an optional count, and an active state derived from which sidebar
+ * section is showing. What differed between the copies was only which of those
+ * each app had needed so far.
+ *
+ * Active state is read from layout state rather than passed in, because the
+ * caller is a `surfaces.mount` in a resource module that has no idea what else
+ * is mounted. Reading it here is what lets a rail of independently-registered
+ * entries agree on which one is current.
+ *
+ * With no `onClick`, clicking runs `command` if given and activates `section`
+ * via the `sidebar.activate` command. That command is not part of scena — an
+ * app registers it, because what "activate" means (which surface, whether it
+ * also reveals) is an app's decision.
+ */
+export declare function ActivityBarItem({ icon, label, section, sectionPath, pos, badge, badgeTone, badgeLabel, secondBadge, secondBadgeTone, secondBadgeLabel, command, args, onClick, className, style, }: ActivityBarItemProps): ReactNode;
+export default ActivityBarItem;

package/dist/ui/navigation/ActivityBarItem.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useScena } from '../../react/ScenaProvider.js';
+import { useStore } from '../../react/hooks/useStore.js';
+import './ActivityBarItem.css';
+const DEFAULT_SECTION_PATH = '$/layout/surfaces/sidebar:left/section';
+// 0 is a real count and should not draw a badge; undefined and '' should not
+// either. Anything else, including a non-numeric string, should. A rail of
+// zeroes is a rail of noise, and an absent badge is the clearest way to say
+// there is nothing waiting.
+function shown(value) {
+    return value !== undefined && value !== '' && Number(value) !== 0;
+}
+// Three digits do not fit a 15px pill beside a 44px icon, and the difference
+// between 120 and 400 is not what the rail is for — either way the answer is
+// "more than you are going to read here".
+function clamp(value) {
+    return typeof value === 'number' && value > 99 ? '99+' : value;
+}
+/**
+ * An entry in the activity bar.
+ *
+ * Every app on scena has written this, and it is the same component each time:
+ * an icon, an optional count, and an active state derived from which sidebar
+ * section is showing. What differed between the copies was only which of those
+ * each app had needed so far.
+ *
+ * Active state is read from layout state rather than passed in, because the
+ * caller is a `surfaces.mount` in a resource module that has no idea what else
+ * is mounted. Reading it here is what lets a rail of independently-registered
+ * entries agree on which one is current.
+ *
+ * With no `onClick`, clicking runs `command` if given and activates `section`
+ * via the `sidebar.activate` command. That command is not part of scena — an
+ * app registers it, because what "activate" means (which surface, whether it
+ * also reveals) is an app's decision.
+ */
+export function ActivityBarItem({ icon, label, section, sectionPath = DEFAULT_SECTION_PATH, pos, badge, badgeTone = 'accent', badgeLabel, secondBadge, secondBadgeTone = 'accent', secondBadgeLabel, command, args, onClick, className, style, }) {
+    const scena = useScena();
+    const activeSection = useStore(sectionPath);
+    const active = section !== undefined && activeSection === section;
+    const hasBadge = shown(badge);
+    const hasSecondBadge = shown(secondBadge);
+    // Built as a sentence rather than a pair of numbers: "Live sessions: 2
+    // running, 5 unread" is the whole state of the section in one line, and it is
+    // the only place the two badges are told apart without colour.
+    const counts = [
+        ...(hasBadge ? [badgeLabel ? `${badge} ${badgeLabel}` : `${badge}`] : []),
+        ...(hasSecondBadge
+            ? [secondBadgeLabel ? `${secondBadge} ${secondBadgeLabel}` : `${secondBadge}`]
+            : []),
+    ];
+    const name = label ?? section ?? '';
+    const described = counts.length === 0 ? label : `${name}: ${counts.join(', ')}`;
+    function handleClick() {
+        if (onClick) {
+            onClick();
+            return;
+        }
+        if (command)
+            void scena.commands.execute(command, args);
+        // `section` last: it is this item's identity, and a stray args.section
+        // silently activating a different one would be very hard to see.
+        if (section)
+            void scena.commands.execute('sidebar.activate', { ...args, section });
+    }
+    return (_jsxs("button", { type: "button", className: ['oo-activity-item', className].filter(Boolean).join(' '), style: style, "data-active": active, "data-pos": pos, title: described, "aria-label": described, "aria-current": active ? 'true' : undefined, onClick: handleClick, children: [_jsx("span", { className: "oo-activity-item__icon", "aria-hidden": "true", children: icon ?? '·' }), hasBadge ? (_jsx("span", { className: "oo-activity-item__badge", "data-tone": badgeTone, "aria-hidden": "true", children: clamp(badge) })) : null, hasSecondBadge ? (_jsx("span", { className: "oo-activity-item__badge oo-activity-item__badge--second", "data-tone": secondBadgeTone, "aria-hidden": "true", children: clamp(secondBadge) })) : null] }));
+}
+export default ActivityBarItem;

package/dist/ui/navigation/catalog.d.ts

@@ -1,2 +1,2 @@
-import type { ComponentDefinition } from '../../types/component-registry.js';
+import type { ComponentDefinition } from '../../sdk/component-registry.js';
 export declare const CATALOG_NAVIGATION_MAP: ComponentDefinition[];

package/dist/ui/navigation/catalog.js

@@ -2,4 +2,5 @@
 export const CATALOG_NAVIGATION_MAP = [
     { component: 'Tabs', category: 'page', renderer: { kind: 'react', load: () => import('./Tabs.js').then((m) => ({ default: m.Tabs })) } },
     { component: 'Link', category: 'inline', renderer: { kind: 'react', load: () => import('./Link.js').then((m) => ({ default: m.Link })) } },
+    { component: 'ActivityBarItem', category: 'inline', renderer: { kind: 'react', load: () => import('./ActivityBarItem.js').then((m) => ({ default: m.ActivityBarItem })) } },
 ];

package/dist/ui/navigation/index.d.ts

@@ -6,3 +6,5 @@ export { Toolbar } from './Toolbar.js';
 export type { ToolbarProps } from './Toolbar.js';
 export { Link, resolveLinkHref } from './Link.js';
 export type { LinkProps, LinkKind } from './Link.js';
+export { ActivityBarItem } from './ActivityBarItem.js';
+export type { ActivityBarItemProps, ActivityBadgeTone } from './ActivityBarItem.js';

package/dist/ui/navigation/index.js

@@ -3,3 +3,4 @@ export { Breadcrumb } from './Breadcrumb.js';
 export { Tabs } from './Tabs.js';
 export { Toolbar } from './Toolbar.js';
 export { Link, resolveLinkHref } from './Link.js';
+export { ActivityBarItem } from './ActivityBarItem.js';

package/dist/ui/overlay/catalog.d.ts

@@ -1,2 +1,2 @@
-import type { ComponentDefinition } from '../../types/component-registry.js';
+import type { ComponentDefinition } from '../../sdk/component-registry.js';
 export declare const CATALOG_OVERLAY_MAP: ComponentDefinition[];

package/dist/ui/register.d.ts

@@ -1,6 +1,6 @@
-import type { Scena } from '../types/scena.js';
-import type { Disposable } from '../types/disposable.js';
-import type { ComponentDefinition } from '../types/component-registry.js';
+import type { Scena } from '../sdk/scena.js';
+import type { Disposable } from '../sdk/disposable.js';
+import type { ComponentDefinition } from '../sdk/component-registry.js';
 export declare function registerCatalog(defs: ComponentDefinition[], scena: Scena): Disposable;
 export declare function registerBuiltins(scena: Scena): Disposable;
 export { registerBuiltinLayouts } from './layout/register.js';

package/dist/ui/register.js

@@ -1,4 +1,4 @@
-import { combineDisposables } from '../core/disposable.js';
+import { combineDisposables } from '../sdk/disposable.js';
 import { CATALOG_LAYOUT_MAP } from './layout/catalog.js';
 import { CATALOG_DISPLAY_MAP } from './display/catalog.js';
 import { CATALOG_DATA_MAP } from './data/catalog.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softov/scena",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Graph-mounted reactive UI runtime (contracts + runtime)",
   "license": "MIT",
   "author": "Luiz Fernando Softov <lfs@softov.dev>",
@@ -23,16 +23,24 @@
   "sideEffects": [
     "**/*.css"
   ],
-  "main": "./dist/core/index.js",
-  "types": "./dist/types/index.d.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/core/index.d.ts",
-      "default": "./dist/core/index.js"
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./sdk": {
+      "types": "./dist/sdk/index.d.ts",
+      "default": "./dist/sdk/index.js"
     },
     "./types": {
-      "types": "./dist/types/index.d.ts",
-      "default": "./dist/types/index.js"
+      "types": "./dist/sdk/index.d.ts",
+      "default": "./dist/sdk/index.js"
+    },
+    "./core": {
+      "types": "./dist/core/index.d.ts",
+      "default": "./dist/core/index.js"
     },
     "./react": {
       "types": "./dist/react/index.d.ts",

package/dist/controls/command.d.ts

@@ -1,18 +0,0 @@
-import type { EventBus } from '../types/events.js';
-import type { ReactiveStore, SocketBridge } from '../types/reactive-store.js';
-import type { MountSurfaceRegistry } from '../types/mount-surface.js';
-import type { CommandRegistry } from '../types/command.js';
-import type { WhenEngine } from '../types/when.js';
-import type { Scena } from '../types/scena.js';
-import type { KeybindingRegistry } from '../types/keybinding.js';
-interface Deps {
-    events: EventBus;
-    store: ReactiveStore;
-    surfaces: MountSurfaceRegistry;
-    when: WhenEngine;
-    socket?: SocketBridge;
-    keybindings: KeybindingRegistry;
-    getScena: () => Scena;
-}
-export declare function createCommandRegistry(deps: Deps): CommandRegistry;
-export {};

package/dist/controls/keybinding.d.ts

@@ -1,9 +0,0 @@
-import type { EventBus } from '../types/events.js';
-import type { KeybindingRegistry } from '../types/keybinding.js';
-import type { WhenEngine } from '../types/when.js';
-interface Deps {
-    events: EventBus;
-    when: WhenEngine;
-}
-export declare function createKeybindingRegistry(deps: Deps): KeybindingRegistry;
-export {};

package/dist/controls/layout.d.ts

@@ -1,16 +0,0 @@
-import type { EventBus } from '../types/events.js';
-import type { ReactiveStore } from '../types/reactive-store.js';
-import type { LayoutAPI, LayoutRegistry, LayoutStorage, ScenaLayout } from '../types/layout.js';
-interface LayoutDeps {
-    events: EventBus;
-    store: ReactiveStore;
-    initial?: ScenaLayout;
-    storage?: LayoutStorage;
-}
-export declare function createLayoutAPI(deps: LayoutDeps): LayoutAPI & {
-    setStorage(s: LayoutStorage | null): void;
-};
-export declare function createLayoutRegistry(deps: {
-    events: EventBus;
-}): LayoutRegistry;
-export {};

package/dist/controls/manifest.d.ts

@@ -1,21 +0,0 @@
-import type { EventBus } from '../types/events.js';
-import type { ReactiveStore } from '../types/reactive-store.js';
-import type { ComponentRegistry } from '../types/component-registry.js';
-import type { CommandRegistry } from '../types/command.js';
-import type { KeybindingRegistry } from '../types/keybinding.js';
-import type { MountSurfaceRegistry } from '../types/mount-surface.js';
-import type { ConverterRegistry } from '../types/converter-registry.js';
-import type { PermissionEngine } from '../types/permissions.js';
-import type { ManifestAPI } from '../types/manifest.js';
-interface Deps {
-    events: EventBus;
-    store: ReactiveStore;
-    components: ComponentRegistry;
-    commands: CommandRegistry;
-    keybindings: KeybindingRegistry;
-    surfaces: MountSurfaceRegistry;
-    converters: ConverterRegistry;
-    permissions: PermissionEngine;
-}
-export declare function createManifestAPI(deps: Deps): ManifestAPI;
-export {};

package/dist/controls/session.d.ts

@@ -1,16 +0,0 @@
-import type { EventBus } from '../types/events.js';
-import type { ReactiveStore } from '../types/reactive-store.js';
-import type { MountSurfaceRegistry } from '../types/mount-surface.js';
-import type { SessionAPI, SessionStorage } from '../types/session.js';
-import type { ComponentRegistry } from '../types/component-registry.js';
-interface Deps {
-    events: EventBus;
-    store: ReactiveStore;
-    surfaces: MountSurfaceRegistry;
-    components: ComponentRegistry;
-    storage?: SessionStorage;
-}
-export declare function createSessionAPI(deps: Deps): SessionAPI & {
-    setStorage(s: SessionStorage | null): void;
-};
-export {};

package/dist/core/binding-resolver.d.ts

@@ -1,7 +0,0 @@
-import type { BindingResolver } from '../types/binding-resolver.js';
-import type { ReactiveStore } from '../types/reactive-store.js';
-interface Deps {
-    store: ReactiveStore;
-}
-export declare function createBindingResolver(deps: Deps): BindingResolver;
-export {};

package/dist/core/converter-registry.d.ts

@@ -1,2 +0,0 @@
-import type { ConverterRegistry } from '../types/converter-registry.js';
-export declare function createConverterRegistry(): ConverterRegistry;

package/dist/core/label.d.ts

@@ -1,2 +0,0 @@
-import type { Label, LabelResolveContext } from "../types/label.js";
-export declare function resolveLabel(label: Label | undefined, ctx: LabelResolveContext): string;

package/dist/core/mount-surface.d.ts

@@ -1,15 +0,0 @@
-import type { EventBus } from '../types/events.js';
-import type { MountSurfaceRegistry } from '../types/mount-surface.js';
-import type { ComponentRegistry } from '../types/component-registry.js';
-import type { WhenEngine } from '../types/when.js';
-import type { BindingResolver } from '../types/binding-resolver.js';
-import type { ReactiveStore } from '../types/reactive-store.js';
-interface Deps {
-    events: EventBus;
-    when: WhenEngine;
-    bindings: BindingResolver;
-    store: ReactiveStore;
-    components: ComponentRegistry;
-}
-export declare function createMountSurfaceRegistry(deps: Deps): MountSurfaceRegistry;
-export {};

package/dist/runtime/builtins.d.ts

@@ -1,3 +0,0 @@
-import type { Disposable } from '../types/disposable.js';
-import type { Scena } from '../types/scena.js';
-export declare function registerBuiltinFunctions(scena: Scena): Disposable;

package/dist/types/disposable.d.ts

@@ -1,3 +0,0 @@
-export interface Disposable {
-    dispose(): void;
-}

package/dist/types/disposable.js

@@ -1 +0,0 @@
-export {};

package/dist/types/label.js

@@ -1 +0,0 @@
-export {};