@signalcore/ui 0.1.0 → 1.0.0-beta.1

package/src/widget/widget.css

@@ -0,0 +1,253 @@
+/*
+ * The widget's own, beside the package's stylesheet: in its shadow root, or (`shadow="none"`) in
+ * the page, where the `signalcore-chat[shadow="none"]` rules stand for the `:host` ones. In its
+ * shadow root the page's styles stay out but its type and ink come in (the element reads them and
+ * gives them as `--_host-*`, which stand in for our defaults), and so do the `--sc-*` tokens set
+ * on the page or on the element. It takes the page's `color-scheme` (light on a page that names
+ * none, unless its text is light: then dark) unless `theme` names one. Its parts for the page are
+ * `::part(…)` (README, Make it yours).
+ */
+:host {
+  all: initial;
+  display: block;
+  color: inherit;
+  color-scheme: inherit;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+:host([theme="light"]),
+signalcore-chat[shadow="none"][theme="light"] {
+  color-scheme: light;
+}
+
+:host([theme="dark"]),
+signalcore-chat[shadow="none"][theme="dark"],
+[data-sc-widget][data-scheme="dark"] {
+  color-scheme: dark;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+signalcore-chat[shadow="none"] {
+  display: block;
+}
+
+signalcore-chat[shadow="none"][hidden] {
+  display: none;
+}
+
+/* Inline, it fills the element, which the page sizes (560px tall unless it says). */
+:host([mode="inline"]),
+signalcore-chat[shadow="none"][mode="inline"] {
+  height: 560px;
+}
+
+[data-sc-widget],
+.sc-widget--inline {
+  height: 100%;
+}
+
+/* The widget's measures: the floating panel's size, the launcher's, and how far from the
+   page's corner they sit. */
+.sc-widget {
+  --_panel-width: var(--sc-panel-width, 400px);
+  --_panel-height: var(--sc-panel-height, 640px);
+  --_launcher: var(--sc-launcher-size, 56px);
+  --_offset: var(--sc-launcher-offset, 20px);
+}
+
+.sc-widget__panel {
+  overflow: hidden;
+  border: 1px solid var(--_line);
+  border-radius: calc(var(--_radius) + 4px);
+  background: var(--_surface);
+}
+
+.sc-widget--inline > .sc-widget__panel {
+  height: 100%;
+}
+
+/* Floating: a round button at the page's corner, the panel opening over it. */
+.sc-widget__launcher {
+  position: fixed;
+  right: var(--_offset);
+  bottom: var(--_offset);
+  z-index: 2147483000;
+  display: grid;
+  place-items: center;
+  width: var(--_launcher);
+  height: var(--_launcher);
+  padding: 0;
+  border: 0;
+  border-radius: var(--_radius-full);
+  background: var(--_accent);
+  color: var(--_accent-fg);
+  box-shadow: var(--_shadow-overlay);
+  cursor: pointer;
+  transition: transform 0.15s ease;
+}
+
+.sc-widget__launcher:hover {
+  transform: scale(1.05);
+}
+
+.sc-widget__launcher:focus-visible {
+  outline: 3px solid var(--_focus);
+  outline-offset: 3px;
+}
+
+.sc-widget__launcher > svg {
+  width: 46%;
+  height: 46%;
+}
+
+.sc-widget--floating > .sc-widget__panel {
+  position: fixed;
+  right: var(--_offset);
+  bottom: calc(var(--_offset) + var(--_launcher) + 12px);
+  z-index: 2147483000;
+  width: min(var(--_panel-width), calc(100vw - 2 * var(--_offset)));
+  height: min(var(--_panel-height), calc(100dvh - 3 * var(--_offset) - var(--_launcher) - 12px));
+  box-shadow: var(--_shadow-overlay);
+  animation: sc-pop 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+/* Floating on a wide screen (or in a wide box), the launcher is the panel's close: the space
+   draws none of its own. */
+@media (min-width: 481px) {
+  .sc-widget--floating:not(.sc-widget--contained) .sc-space > .sc-space__close {
+    display: none;
+  }
+  .sc-widget--floating:not(.sc-widget--contained)
+    .sc-space
+    > .sc-space__close
+    ~ .sc-space__body
+    > .sc-chat
+    > .sc-chat__log {
+    padding-top: calc(var(--_space) * 4);
+  }
+}
+
+@container (min-width: 481px) {
+  .sc-widget--contained .sc-space > .sc-space__close {
+    display: none;
+  }
+  .sc-widget--contained .sc-space > .sc-space__close ~ .sc-space__body > .sc-chat > .sc-chat__log {
+    padding-top: calc(var(--_space) * 4);
+  }
+}
+
+/* A phone: the panel takes the screen, and its own close is the way out. */
+@media (max-width: 480px) {
+  .sc-widget--floating > .sc-widget__panel {
+    inset: 0;
+    width: auto;
+    height: auto;
+    border: 0;
+    border-radius: 0;
+  }
+  .sc-widget--open > .sc-widget__launcher {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sc-widget__launcher {
+    transition: none;
+  }
+  .sc-widget--floating > .sc-widget__panel {
+    animation: none;
+  }
+}
+
+/* Its look may put it at the page's left corner. */
+.sc-widget--left > .sc-widget__launcher,
+.sc-widget--left.sc-widget--floating > .sc-widget__panel {
+  right: auto;
+  left: var(--_offset);
+}
+
+/*
+ * `contained`: floating within the element's own box, which the page sizes, instead of at the
+ * page's corner (a preview of the widget on a site). Its box is the container the phone's rules
+ * read, so a narrow box shows the widget as a phone does.
+ */
+:host([contained]),
+signalcore-chat[shadow="none"][contained] {
+  position: relative;
+  height: 100%;
+}
+
+:host([contained]) [data-sc-widget],
+signalcore-chat[shadow="none"][contained] [data-sc-widget] {
+  container-type: size;
+}
+
+.sc-widget--contained > .sc-widget__launcher,
+.sc-widget--contained.sc-widget--floating > .sc-widget__panel {
+  position: absolute;
+  z-index: 1;
+}
+
+.sc-widget--contained.sc-widget--floating > .sc-widget__panel {
+  width: min(var(--_panel-width), calc(100% - 2 * var(--_offset)));
+  height: min(var(--_panel-height), calc(100% - 3 * var(--_offset) - var(--_launcher) - 12px));
+}
+
+@container (max-width: 480px) {
+  .sc-widget--contained.sc-widget--floating > .sc-widget__panel {
+    inset: 0;
+    width: auto;
+    height: auto;
+    border: 0;
+    border-radius: 0;
+  }
+  .sc-widget--contained.sc-widget--open > .sc-widget__launcher {
+    display: none;
+  }
+}
+
+/*
+ * `unstyled`: our look's defaults drop away (the host's tokens still apply): no grounds but the
+ * system's under a floating panel, no lines, no shadows, no corners, every ink the page's text.
+ * The layout stays, for the host's own stylesheet to dress.
+ */
+[data-sc-unstyled] .sc {
+  --_muted: var(--sc-muted, var(--_fg));
+  --_subtle: var(--sc-subtle, var(--_fg));
+  --_bg: var(--sc-bg, transparent);
+  --_surface: var(--sc-surface, transparent);
+  --_sunken: var(--sc-sunken, transparent);
+  --_line: var(--sc-line, transparent);
+  --_line-hover: var(--_line);
+  --_wash: transparent;
+  --_accent: var(--sc-accent, var(--_fg));
+  --_accent-fg: var(--sc-accent-fg, Canvas);
+  --_bubble: var(--sc-bubble, transparent);
+  --_primary: var(--sc-primary, transparent);
+  --_on-primary: var(--sc-on-primary, var(--_fg));
+  --_success: var(--sc-success, var(--_fg));
+  --_warning: var(--sc-warning, var(--_fg));
+  --_danger: var(--sc-danger, var(--_fg));
+  --_danger-fg: var(--sc-danger-fg, Canvas);
+  --_sky: var(--sc-sky, var(--_fg));
+  --_sand: var(--sc-sand, var(--_fg));
+  --_rose: var(--sc-rose, var(--_fg));
+  --_radius: var(--sc-radius, 0px);
+  --_radius-full: var(--sc-radius-full, 0px);
+  --_shadow: var(--sc-shadow, none);
+  --_shadow-raised: var(--sc-shadow-raised, none);
+  --_shadow-overlay: var(--sc-shadow-overlay, none);
+  --_focus: var(--sc-focus, currentColor);
+}
+
+[data-sc-unstyled] .sc-widget__panel {
+  border-radius: var(--_radius);
+}
+
+[data-sc-unstyled] .sc-widget--floating > .sc-widget__panel {
+  background: var(--sc-surface, Canvas);
+}

package/dist/SignalcoreProvider.d.ts

@@ -1,113 +0,0 @@
-import { type ReactNode } from "react";
-import type { UiClient } from "./client.js";
-import type { HostComponents } from "./host.js";
-import { type ClassNames, type Part } from "./look.js";
-import { type Language, type Locale, type MessageOverrides, type Messages } from "./messages/index.js";
-import { type Patterns } from "./patterns.js";
-import { type ThemeOption } from "./theme.js";
-import type { DefaultWindowComponents, Viewer } from "./windows/kinds.js";
-/** What every component below the provider can use. */
-export interface Scope {
-    client: UiClient | undefined;
-    components: HostComponents;
-    classNames: ClassNames | undefined;
-    patterns: Patterns;
-    language: Language;
-    /** The host's components for the default windows, laid over the package's own. */
-    windows: DefaultWindowComponents;
-    viewer: Viewer;
-}
-export interface SignalcoreProviderProps {
-    /** The API, for what the user does on a card and for streams. Without one, hosts answer. */
-    client?: UiClient | undefined;
-    /**
-     * The host's own components by name: the primitives surfaces are built from (`Button`, `Card`,
-     * `Table`, `Input`, `Select`) and the catalog's components (see `HostComponents`). Never the
-     * cards that ask the owner to decide (`RequestCard`).
-     */
-    components?: HostComponents | undefined;
-    /**
-     * How it looks. By default (`"auto"`) the design system the page uses is found and followed
-     * (shadcn, Radix Themes, Material), and a page that uses none keeps its own font, color and
-     * scheme with our defaults. Name a system (`"shadcn"`) to skip the search, or pass tokens to
-     * lay over whichever system there is (`{ accent: "var(--brand)" }`; `preset` picks the system).
-     * Written as custom properties on the wrapper element, never on the page's root.
-     */
-    theme?: ThemeOption | undefined;
-    /** Classes to add to the package's elements, by slot. */
-    classNames?: ClassNames | undefined;
-    /** Which layout our components take where they have two (see `Patterns`). */
-    patterns?: Partial<Patterns> | undefined;
-    /**
-     * The language of the words the components say, and of the dates they write: `"es"` (the
-     * default) or `"en"`.
-     */
-    locale?: Locale | undefined;
-    /**
-     * Words to change, laid over the locale's dictionary: `{ send: "Post", verbs: { read: "Open" } }`.
-     * Hoist the object (or memoize it), so the components are not drawn again for nothing.
-     */
-    messages?: MessageOverrides | undefined;
-    /**
-     * Leave out the shipped styles: the elements and their classes are the same, but the
-     * stylesheet does not apply to them, so a host styles them through `classNames` alone.
-     */
-    unstyled?: boolean | undefined;
-    /**
-     * The components that draw the app's default windows (ADR 0011), by kind: `chat`,
-     * `automations`, `flow`, `voice`, `browser` and `live`. They are laid over the package's own
-     * (the chat, the browser and the live stream), so a host replaces one by naming its kind, and
-     * adds the ones that live in other entries (`FlowWindow` from `@signalcore/ui/flow`,
-     * `VoiceWindow` from `@signalcore/ui/voice`). A kind with no component shows its text twin.
-     * Hoist the object (or memoize it), so the shell is not drawn again for nothing.
-     */
-    windows?: DefaultWindowComponents | undefined;
-    /**
-     * Who is looking: `"owner"` (the default) for the business's owner and team, `"end_user"` for
-     * a person the business serves (ADR 0009). The shell only opens the windows that viewer may
-     * see: an end user gets `chat` and `voice`, never `automations`, `flow` or the browser. The
-     * client does not say which credential it holds, so the host does; the API refuses an end
-     * user's credential the owner's calls whatever this says.
-     */
-    viewer?: Viewer | undefined;
-    children: ReactNode;
-}
-/**
- * The one place a host says how SignalCore is reached and how it looks. It wraps its children in
- * an element that carries the tokens (`display: contents` in styles.css, so it takes no room),
- * which is why the styles reach everything below it and nothing else.
- */
-export declare function SignalcoreProvider({ client, components, theme, classNames, patterns, locale, messages, unstyled, windows, viewer, children, }: SignalcoreProviderProps): import("react").JSX.Element;
-/** The client, components and classes of the nearest provider; nothing set when there is none. */
-export declare function useSignalcore(): Scope;
-/** The words the components say, in the provider's language, with the host's own laid over. */
-export declare function useMessages(): Messages;
-/** The provider's language: its words, and the locale that dates are written in. */
-export declare function useLanguage(): Language;
-/** The props of the slots, with the host's classes: spread them onto the elements. */
-export declare function useParts(): Part;
-/**
- * A component used outside any provider still gets the tokens: it brings a default one of its
- * own. Inside a provider it adds nothing, so a host's theme is never overridden by a nested one.
- */
-export declare function Scoped({ children }: {
-    children: ReactNode;
-}): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
-/**
- * What the platform draws itself. The host's components do not reach below it: the cards that
- * ask the owner to decide (approve, connect, enter a secret, take the controls) are built from
- * our own primitives only, so no replacement can change what an "Aprobar" button does or says.
- * The host's tokens and classes still apply.
- */
-export declare function Platform({ children }: {
-    children: ReactNode;
-}): import("react").JSX.Element;
-/**
- * The same scope with another client, for what is drawn below it. A shell uses it to hear the
- * answers its windows get, wherever a turn is sent from (the chat, a voice window), without any
- * of them knowing it is there.
- */
-export declare function WithClient({ client, children, }: {
-    client: UiClient | undefined;
-    children: ReactNode;
-}): import("react").JSX.Element;

package/dist/SignalcoreProvider.js

@@ -1,84 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useMemo } from "react";
-import { partsOf } from "./look.js";
-import { languageOf, } from "./messages/index.js";
-import { DEFAULT_PATTERNS } from "./patterns.js";
-import { themeStyle } from "./theme.js";
-import { useTokens } from "./useTokens.js";
-const NO_COMPONENTS = {};
-const NO_WINDOWS = {};
-const NOTHING = {
-    client: undefined,
-    components: NO_COMPONENTS,
-    classNames: undefined,
-    patterns: DEFAULT_PATTERNS,
-    language: languageOf(),
-    windows: NO_WINDOWS,
-    viewer: "owner",
-};
-const Context = createContext(null);
-/**
- * The one place a host says how SignalCore is reached and how it looks. It wraps its children in
- * an element that carries the tokens (`display: contents` in styles.css, so it takes no room),
- * which is why the styles reach everything below it and nothing else.
- */
-export function SignalcoreProvider({ client, components, theme, classNames, patterns, locale, messages, unstyled = false, windows, viewer = "owner", children, }) {
-    const tokens = useTokens(theme);
-    const scope = useMemo(() => ({
-        client,
-        components: components ?? NO_COMPONENTS,
-        classNames,
-        patterns: { ...DEFAULT_PATTERNS, ...patterns },
-        language: languageOf(locale, messages),
-        windows: windows ?? NO_WINDOWS,
-        viewer,
-    }), [client, components, classNames, patterns, locale, messages, windows, viewer]);
-    const part = partsOf(classNames);
-    return (_jsx(Context, { value: scope, children: _jsx("div", { ...part("ui"), "data-sc-unstyled": unstyled ? "" : undefined, style: themeStyle(tokens), children: children }) }));
-}
-/** The client, components and classes of the nearest provider; nothing set when there is none. */
-export function useSignalcore() {
-    return useContext(Context) ?? NOTHING;
-}
-/** The words the components say, in the provider's language, with the host's own laid over. */
-export function useMessages() {
-    return useSignalcore().language.messages;
-}
-/** The provider's language: its words, and the locale that dates are written in. */
-export function useLanguage() {
-    return useSignalcore().language;
-}
-/** The props of the slots, with the host's classes: spread them onto the elements. */
-export function useParts() {
-    const { classNames } = useSignalcore();
-    return useMemo(() => partsOf(classNames), [classNames]);
-}
-/**
- * A component used outside any provider still gets the tokens: it brings a default one of its
- * own. Inside a provider it adds nothing, so a host's theme is never overridden by a nested one.
- */
-export function Scoped({ children }) {
-    const inside = useContext(Context) !== null;
-    return inside ? children : _jsx(SignalcoreProvider, { children: children });
-}
-/**
- * What the platform draws itself. The host's components do not reach below it: the cards that
- * ask the owner to decide (approve, connect, enter a secret, take the controls) are built from
- * our own primitives only, so no replacement can change what an "Aprobar" button does or says.
- * The host's tokens and classes still apply.
- */
-export function Platform({ children }) {
-    const scope = useSignalcore();
-    const platform = useMemo(() => ({ ...scope, components: NO_COMPONENTS }), [scope]);
-    return _jsx(Context, { value: platform, children: children });
-}
-/**
- * The same scope with another client, for what is drawn below it. A shell uses it to hear the
- * answers its windows get, wherever a turn is sent from (the chat, a voice window), without any
- * of them knowing it is there.
- */
-export function WithClient({ client, children, }) {
-    const scope = useSignalcore();
-    const next = useMemo(() => ({ ...scope, client }), [scope, client]);
-    return _jsx(Context, { value: next, children: children });
-}

package/dist/automations/AppMarks.d.ts

@@ -1,11 +0,0 @@
-import type { AppDirectory } from "../request/types.js";
-import type { AppChip } from "../windows/types.js";
-export interface AppMarksProps {
-    /** The apps a part uses (`apps` of an automation or a skill in the overview). */
-    chips: AppChip[];
-    /** How the host knows its apps (names and logos); without it an app is a monogram. */
-    apps?: AppDirectory | undefined;
-    className?: string | undefined;
-}
-/** The apps a part uses, as their logos with names; dimmed, and said so, until connected. */
-export declare function AppMarks(props: AppMarksProps): import("react").JSX.Element;

package/dist/automations/AppMarks.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AppLogo } from "../request/apps.js";
-import { Scoped, useMessages, useParts } from "../SignalcoreProvider.js";
-/** The apps a part uses, as their logos with names; dimmed, and said so, until connected. */
-export function AppMarks(props) {
-    return (_jsx(Scoped, { children: _jsx(Marks, { ...props }) }));
-}
-function Marks({ chips, apps, className }) {
-    const part = useParts();
-    const copy = useMessages().automations;
-    return (_jsx("span", { ...part("app-marks", [], className), children: chips.map((chip) => (_jsxs("span", { ...part("app-marks__item", [!chip.connected && "off"]), title: chip.connected ? undefined : `${chip.name} ${copy.notConnected}`, children: [_jsx(AppLogo, { apps: apps, mark: {
-                        provider: chip.provider,
-                        name: chip.name,
-                        icon: chip.icon,
-                        website: chip.website,
-                        size: 14,
-                    } }), chip.name, !chip.connected && ` (${copy.notConnected})`] }, chip.alias))) }));
-}

package/dist/automations/AutomationCard.d.ts

@@ -1,27 +0,0 @@
-import type { AppDirectory } from "../request/types.js";
-import type { Automation, Presentation } from "../windows/types.js";
-export interface AutomationCardProps {
-    automation: Automation;
-    /** What a model wrote about it (`presentations["automation:<id>"]` of the overview). */
-    presentation?: Presentation | undefined;
-    /** The builder is working on this automation: its state reads "building". */
-    building?: boolean | undefined;
-    /** It is the one the owner's eye should find: it comes into view and is washed once. */
-    focused?: boolean | undefined;
-    /** Changes each time the focus is pressed on again, replaying the wash. */
-    attention?: number | null | undefined;
-    /** Called with the automation's id when the owner asks to see its steps. */
-    onOpenFlow?: ((id: string) => void) | undefined;
-    /** Called with a line to say to the builder, as the owner. */
-    onAsk?: ((prompt: string) => void) | undefined;
-    /** How the host knows its apps (names and logos); without it an app is a monogram. */
-    apps?: AppDirectory | undefined;
-    className?: string | undefined;
-}
-/**
- * One automation as the owner reads it: what it is called and when it runs, its state, the
- * apps it uses and how the last run went, with the model's own words over them when it has
- * written some. It opens to the rest. `AutomationsWindow` is a list of these; a host that lays
- * its page out by hand can use the card on its own.
- */
-export declare function AutomationCard(props: AutomationCardProps): import("react").JSX.Element;

package/dist/automations/AutomationCard.js

@@ -1,53 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Scoped, useLanguage, useMessages, useParts } from "../SignalcoreProvider.js";
-import { automationStatus } from "../windows/status.js";
-import { StatusLabel } from "../windows/StatusLabel.js";
-import { AppMarks } from "./AppMarks.js";
-import { Card } from "./Card.js";
-import { ScheduleMarks } from "./ScheduleMarks.js";
-import { timeAgo } from "./time.js";
-/** How an automation starts, as the catalog names the glyph that says it. */
-const TRIGGER_GLYPH = {
-    cron: "clock",
-    webhook: "link",
-    event: "zap",
-};
-/**
- * One automation as the owner reads it: what it is called and when it runs, its state, the
- * apps it uses and how the last run went, with the model's own words over them when it has
- * written some. It opens to the rest. `AutomationsWindow` is a list of these; a host that lays
- * its page out by hand can use the card on its own.
- */
-export function AutomationCard(props) {
-    return (_jsx(Scoped, { children: _jsx(Entry, { ...props }) }));
-}
-function Entry({ automation, presentation, building = false, focused = false, attention = null, onOpenFlow, onAsk, apps, className, }) {
-    const part = useParts();
-    const copy = useMessages();
-    const { locale } = useLanguage();
-    const words = copy.automations;
-    const status = automationStatus(automation.status, copy);
-    const last = automation.activity?.last;
-    const failed = last?.status === "failed";
-    const runs = automation.activity?.runs_7d ?? 0;
-    const failures = automation.activity?.failed_7d ?? 0;
-    const approvals = automation.apps.flatMap((app) => app.needs_approval.map((action) => words.approvalIn(action, app.name)));
-    return (_jsx(Card, { kind: automation.kind, className: className, presentation: presentation, glyph: TRIGGER_GLYPH[automation.kind], tint: "signal", building: building, focused: focused, attention: attention, meta: _jsx(ScheduleMarks, { cron: automation.cron, tone: building ? "signal" : "accent" }), fallback: {
-            title: automation.title,
-            tagline: (_jsxs(_Fragment, { children: [automation.when, automation.apps.length > 0 && _jsx(AppMarks, { chips: automation.apps, apps: apps })] })),
-            description: automation.summary ?? automation.reaches.join(". "),
-            facts: [
-                ...(automation.cron ? [] : [{ label: words.when, value: automation.when }]),
-                ...(approvals.length > 0
-                    ? [{ label: words.needsApproval, value: approvals.join(", ") }]
-                    : []),
-            ],
-        }, status: building ? (_jsx(StatusLabel, { tone: "signal", live: true, children: words.building })) : (_jsx(StatusLabel, { tone: status.tone, children: status.word })), extra: _jsxs("p", { ...part("automation__activity", [failed && "failed"]), children: [last
-                    ? failed
-                        ? words.failedLast(timeAgo(last.at, locale), last.error ?? null)
-                        : words.ranLast(timeAgo(last.at, locale))
-                    : words.neverRan, runs > 0 && `. ${words.thisWeek(runs, failures)}`] }), onOpen: onOpenFlow &&
-            (() => {
-                onOpenFlow(automation.id);
-            }), onAsk: onAsk }));
-}

package/dist/automations/AutomationsWindow.d.ts

@@ -1,38 +0,0 @@
-import type { AppDirectory } from "../request/types.js";
-import type { Overview } from "../windows/types.js";
-export interface AutomationsWindowProps {
-    /**
-     * The agent as its owner sees it: its channels, its automations and what was written about
-     * them. It is what is drawn when given. Without it, the window asks for the overview of
-     * `agentId` through the provider's client (`agents.overview`).
-     */
-    overview?: Overview | undefined;
-    /** The agent to ask about when there is no `overview`. */
-    agentId?: string | undefined;
-    /** The automation the builder is working on (its `id`): it comes into view and is washed once. */
-    focusedId?: string | null | undefined;
-    /** Changes each time the builder touches the focused automation again, replaying the wash. */
-    attention?: number | null | undefined;
-    /** The builder is working: the focused automation reads "building". */
-    building?: boolean | undefined;
-    /** The owner asked to see the steps of an automation or a channel (its `id`). */
-    onOpenFlow?: ((id: string) => void) | undefined;
-    /** A line to say to the builder as the owner: a change they may want. */
-    onAsk?: ((prompt: string) => void) | undefined;
-    /** How the host knows its apps (names and logos); without it an app is a monogram. */
-    apps?: AppDirectory | undefined;
-    /** What the window is called to someone who cannot see it. */
-    label?: string | undefined;
-    className?: string | undefined;
-}
-/**
- * What the agent does, as the cards the owner reads (ADR 0011's `automations` window): split the
- * way the engine runs it, in conversations with customers (one card per channel it answers on,
- * with the platform's reading of how it stands) and on its own (its automations: when they run,
- * how the last time went, a way to see their steps). Each card shows what a model wrote about
- * the part, in the owner's words, and the platform's own reading until it has.
- *
- * It is drawn from facts and never generated, and it is a window of the owner: the overview
- * names their apps and runs, so it needs an owner's credential.
- */
-export declare function AutomationsWindow(props: AutomationsWindowProps): import("react").JSX.Element;

package/dist/automations/AutomationsWindow.js

@@ -1,57 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { AppLogo } from "../request/apps.js";
-import { Scoped, useMessages, useParts } from "../SignalcoreProvider.js";
-import { Pending } from "../windows/Pending.js";
-import { channelStatus } from "../windows/status.js";
-import { StatusLabel } from "../windows/StatusLabel.js";
-import { useOverview } from "../windows/useLoaded.js";
-import { AutomationCard } from "./AutomationCard.js";
-import { Card } from "./Card.js";
-/**
- * What the agent does, as the cards the owner reads (ADR 0011's `automations` window): split the
- * way the engine runs it, in conversations with customers (one card per channel it answers on,
- * with the platform's reading of how it stands) and on its own (its automations: when they run,
- * how the last time went, a way to see their steps). Each card shows what a model wrote about
- * the part, in the owner's words, and the platform's own reading until it has.
- *
- * It is drawn from facts and never generated, and it is a window of the owner: the overview
- * names their apps and runs, so it needs an owner's credential.
- */
-export function AutomationsWindow(props) {
-    return (_jsx(Scoped, { children: _jsx(Frame, { ...props }) }));
-}
-function Frame({ overview, agentId, label, className, ...rest }) {
-    const part = useParts();
-    const copy = useMessages();
-    const loaded = useOverview(overview, agentId);
-    return (_jsx("section", { ...part("automations", [], className), "aria-label": label ?? copy.automations.label, "aria-busy": loaded.state === "loading", children: loaded.state === "ready" ? (_jsx(Cards, { overview: loaded.value, ...rest })) : (_jsx(Pending, { state: loaded.state, failed: copy.automations.cannotLoad })) }));
-}
-function Cards({ overview, focusedId = null, attention = null, building = false, onOpenFlow, onAsk, apps, }) {
-    const part = useParts();
-    const copy = useMessages();
-    const words = copy.automations;
-    const shown = overview.presentations ?? {};
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ...part("automations__group"), children: [_jsx("h3", { ...part("automations__title"), children: words.withCustomers }), _jsxs("ul", { ...part("automations__list"), children: [overview.channels.length === 0 && (_jsx("li", { ...part("automations__item"), children: _jsx(Card, { kind: "channel", presentation: undefined, glyph: "message-circle", fallback: {
-                                        title: words.noChannelTitle,
-                                        tagline: words.noChannelTagline,
-                                        description: words.noChannelBody,
-                                    } }) })), overview.channels.map((channel) => {
-                                const status = channelStatus(channel.status, copy);
-                                return (_jsx("li", { ...part("automations__item"), children: _jsx(Card, { kind: "channel", presentation: shown[channel.id] ?? shown[`channel:${channel.connection_id}`], glyph: "message-circle", mark: _jsx(AppLogo, { apps: apps, mark: {
-                                                provider: channel.provider,
-                                                name: channel.name,
-                                                icon: null,
-                                                size: 26,
-                                            } }), fallback: {
-                                            title: channel.title,
-                                            tagline: channel.name,
-                                            description: channel.summary,
-                                        }, status: _jsx(StatusLabel, { tone: status.tone, children: status.word }), onOpen: onOpenFlow &&
-                                            (() => {
-                                                onOpenFlow(channel.id);
-                                            }), onAsk: onAsk }) }, channel.id));
-                            })] })] }), _jsxs("div", { ...part("automations__group"), children: [_jsx("h3", { ...part("automations__title"), children: words.onItsOwn }), overview.automations.length === 0 ? (_jsx("p", { ...part("automations__empty"), children: words.noAutomations })) : (_jsx("ul", { ...part("automations__list"), children: overview.automations.map((automation) => {
-                            const focused = automation.id === focusedId;
-                            return (_jsx("li", { ...part("automations__item"), children: _jsx(AutomationCard, { automation: automation, presentation: shown[`automation:${automation.id}`], building: building && focused, focused: focused, attention: focused ? attention : null, onOpenFlow: onOpenFlow, onAsk: onAsk, apps: apps }) }, automation.id));
-                        }) }))] })] }));
-}