@things-factory/ai-dashboard 0.0.0-stage → 10.1.213

package/dist-client/components/card-library.js

@@ -0,0 +1,276 @@
+import { __decorate, __metadata } from "tslib";
+/*
+ * The card library - one's own cards and those shared with one (ADR-0160 decision 7). A card is placed on the
+ * dashboard from here, shared, copied, renamed, taken back to an earlier version or deleted by its owner.
+ */
+import '@material/web/icon/icon.js';
+import '@material/web/button/filled-tonal-button.js';
+import '@material/web/button/text-button.js';
+import { LitElement, css, html, nothing } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { notify } from '@operato/layout';
+import { OxPrompt } from '@operato/popup/ox-prompt.js';
+import { cardApi, DASHBOARD_CHANGED, dashboardChanged } from '../utils/card-api.js';
+import { ownershipLine, viewIcon } from '../utils/card-words.js';
+import { openCardRename, openCardShare, openCardVersions } from './card-dialogs.js';
+const t = (key, options = {}) => String(i18next.t(key, options));
+let CardLibrary = class CardLibrary extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.which = 'mine';
+        this.onChanged = () => this.load();
+    }
+    static { this.styles = css `
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      padding: 12px 20px 20px;
+      color: var(--ui-ink, var(--md-sys-color-on-surface));
+      font-size: var(--ui-t-body, 13px);
+      line-height: 1.5;
+    }
+
+    .tabs {
+      display: flex;
+      gap: 4px;
+      padding: 3px;
+      border-radius: 10px;
+      background: var(--ui-panel-2, var(--md-sys-color-surface-container));
+      align-self: flex-start;
+    }
+
+    .tabs button {
+      padding: 6px 14px;
+      border: 0;
+      border-radius: 8px;
+      background: transparent;
+      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      font: inherit;
+      font-weight: 600;
+      cursor: pointer;
+    }
+
+    .tabs button[aria-selected='true'] {
+      background: var(--ui-panel, var(--md-sys-color-surface-container-lowest));
+      color: var(--ui-ink, var(--md-sys-color-on-surface));
+      box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
+    }
+
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
+      gap: 10px;
+    }
+
+    li {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      padding: 14px;
+      border: 1px solid var(--ui-line, var(--md-sys-color-outline-variant));
+      border-radius: 12px;
+      background: var(--ui-panel, var(--md-sys-color-surface-container-lowest));
+    }
+
+    .head {
+      display: flex;
+      gap: 10px;
+      align-items: flex-start;
+    }
+
+    .kind {
+      flex: none;
+      display: grid;
+      place-items: center;
+      width: 32px;
+      height: 32px;
+      border-radius: 8px;
+      background: var(--ui-accent-wash, color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent));
+      color: var(--ui-accent, var(--md-sys-color-primary));
+      --md-icon-size: 18px;
+    }
+
+    .names {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .names strong {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .names small {
+      display: block;
+      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+    }
+
+    .badge {
+      flex: none;
+      padding: 1px 8px;
+      border-radius: 999px;
+      background: var(--ui-panel-2, var(--md-sys-color-surface-container));
+      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      font-size: var(--ui-t-micro, 11px);
+      font-variant-numeric: tabular-nums;
+    }
+
+    .row {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 2px;
+    }
+
+    .row .placed {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      margin-right: auto;
+      color: var(--ui-good, #2e7d32);
+      font-size: var(--ui-t-small, 12px);
+      --md-icon-size: 16px;
+    }
+
+    .row .spacer {
+      margin-right: auto;
+    }
+
+    button.icon {
+      display: grid;
+      place-items: center;
+      width: 30px;
+      height: 30px;
+      padding: 0;
+      border: 0;
+      border-radius: 8px;
+      background: transparent;
+      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      cursor: pointer;
+      --md-icon-size: 18px;
+    }
+
+    button.icon:hover {
+      background: var(--ui-hover, var(--md-sys-color-surface-container-high));
+      color: var(--ui-ink, var(--md-sys-color-on-surface));
+    }
+
+    .empty {
+      padding: 36px 12px;
+      text-align: center;
+      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+    }
+  `; }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener(DASHBOARD_CHANGED, this.onChanged);
+        this.load();
+    }
+    disconnectedCallback() {
+        window.removeEventListener(DASHBOARD_CHANGED, this.onChanged);
+        super.disconnectedCallback();
+    }
+    async load() {
+        try {
+            this.cards = await cardApi.library(this.which);
+            this.error = undefined;
+        }
+        catch (error) {
+            this.error = error?.message ?? String(error);
+        }
+    }
+    show(which) {
+        this.which = which;
+        this.cards = undefined;
+        this.load();
+    }
+    render() {
+        return html `<div class="tabs" role="tablist">
+        <button role="tab" aria-selected=${this.which === 'mine' ? 'true' : 'false'} @click=${() => this.show('mine')}>${t('ai-dashboard.library.mine')}</button>
+        <button role="tab" aria-selected=${this.which === 'shared' ? 'true' : 'false'} @click=${() => this.show('shared')}>${t('ai-dashboard.library.shared')}</button>
+      </div>
+      ${this.error ? html `<p class="empty">${this.error}</p>` : nothing}
+      ${this.cards && !this.cards.length ? html `<p class="empty">${t(this.which === 'mine' ? 'ai-dashboard.library.none-mine' : 'ai-dashboard.library.none-shared')}</p>` : nothing}
+      <ul>
+        ${(this.cards ?? []).map(card => this.renderCard(card))}
+      </ul>`;
+    }
+    renderCard(card) {
+        const owner = card.access === 'owner';
+        const icon = (action, name, key) => html `<button class="icon" title=${t(key)} aria-label=${t(key)} @click=${action}><md-icon>${name}</md-icon></button>`;
+        const line = [card.description, ownershipLine(card, t)].filter(Boolean).join(' · ');
+        return html `<li>
+      <div class="head">
+        <span class="kind"><md-icon>${viewIcon(card.definition)}</md-icon></span>
+        <span class="names"><strong title=${card.name}>${card.name}</strong>${line ? html `<small>${line}</small>` : nothing}</span>
+        <span class="badge">v${card.version}</span>
+      </div>
+      <div class="row">
+        ${card.placed
+            ? html `<span class="placed"><md-icon>check_circle</md-icon>${t('ai-dashboard.library.placed')}</span>`
+            : html `<md-filled-tonal-button @click=${() => this.place(card)}>${t('ai-dashboard.library.place')}</md-filled-tonal-button><span class="spacer"></span>`}
+        ${owner ? icon(() => openCardShare(card), 'share', 'ai-dashboard.card.share') : nothing}
+        ${owner ? icon(() => openCardRename(card), 'edit', 'ai-dashboard.card.rename') : nothing}
+        ${owner ? icon(() => openCardVersions(card), 'history', 'ai-dashboard.card.versions') : nothing}
+        ${icon(() => this.copy(card), 'content_copy', owner ? 'ai-dashboard.card.duplicate' : 'ai-dashboard.card.copy')}
+        ${owner ? icon(() => this.deleteCard(card), 'delete_outline', 'ai-dashboard.card.delete') : nothing}
+      </div>
+    </li>`;
+    }
+    async place(card) {
+        await this.attempt(async () => {
+            await cardApi.place(card.id);
+            notify({ level: 'info', message: t('ai-dashboard.text.placed', { name: card.name }) });
+        });
+    }
+    async copy(card) {
+        await this.attempt(async () => {
+            await cardApi.copy(card.id);
+            notify({ level: 'info', message: t('ai-dashboard.text.copied', { name: card.name }) });
+        });
+    }
+    async deleteCard(card) {
+        const sure = await OxPrompt.open({
+            title: t('ai-dashboard.card.delete'),
+            text: t(card.shares?.length ? 'ai-dashboard.text.delete-shared' : 'ai-dashboard.text.delete', { name: card.name }),
+            confirmButton: { text: t('ai-dashboard.card.delete') },
+            cancelButton: { text: t('ai-dashboard.button.cancel') }
+        });
+        if (!sure)
+            return;
+        await this.attempt(() => cardApi.remove(card.id));
+    }
+    async attempt(work) {
+        try {
+            await work();
+            dashboardChanged();
+        }
+        catch (error) {
+            notify({ level: 'error', message: error?.message ?? String(error) });
+        }
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], CardLibrary.prototype, "which", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], CardLibrary.prototype, "cards", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], CardLibrary.prototype, "error", void 0);
+CardLibrary = __decorate([
+    customElement('ai-dashboard-card-library')
+], CardLibrary);
+export { CardLibrary };
+//# sourceMappingURL=card-library.js.map

package/dist-client/components/card-library.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-library.js","sourceRoot":"","sources":["../../client/components/card-library.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * The card library - one's own cards and those shared with one (ADR-0160 decision 7). A card is placed on the\n * dashboard from here, shared, copied, renamed, taken back to an earlier version or deleted by its owner.\n */\nimport '@material/web/icon/icon.js'\nimport '@material/web/button/filled-tonal-button.js'\nimport '@material/web/button/text-button.js'\n\nimport { LitElement, css, html, nothing } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { notify } from '@operato/layout'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\n\nimport { cardApi, DASHBOARD_CHANGED, dashboardChanged, type CardItem } from '../utils/card-api.js'\nimport { ownershipLine, viewIcon } from '../utils/card-words.js'\nimport { openCardRename, openCardShare, openCardVersions } from './card-dialogs.js'\n\nconst t = (key: string, options: Record<string, unknown> = {}) => String(i18next.t(key, options))\n\n@customElement('ai-dashboard-card-library')\nexport class CardLibrary extends localize(i18next)(LitElement) {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      padding: 12px 20px 20px;\n      color: var(--ui-ink, var(--md-sys-color-on-surface));\n      font-size: var(--ui-t-body, 13px);\n      line-height: 1.5;\n    }\n\n    .tabs {\n      display: flex;\n      gap: 4px;\n      padding: 3px;\n      border-radius: 10px;\n      background: var(--ui-panel-2, var(--md-sys-color-surface-container));\n      align-self: flex-start;\n    }\n\n    .tabs button {\n      padding: 6px 14px;\n      border: 0;\n      border-radius: 8px;\n      background: transparent;\n      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n      font: inherit;\n      font-weight: 600;\n      cursor: pointer;\n    }\n\n    .tabs button[aria-selected='true'] {\n      background: var(--ui-panel, var(--md-sys-color-surface-container-lowest));\n      color: var(--ui-ink, var(--md-sys-color-on-surface));\n      box-shadow: 0 1px 3px rgb(0 0 0 / 12%);\n    }\n\n    ul {\n      list-style: none;\n      margin: 0;\n      padding: 0;\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));\n      gap: 10px;\n    }\n\n    li {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      padding: 14px;\n      border: 1px solid var(--ui-line, var(--md-sys-color-outline-variant));\n      border-radius: 12px;\n      background: var(--ui-panel, var(--md-sys-color-surface-container-lowest));\n    }\n\n    .head {\n      display: flex;\n      gap: 10px;\n      align-items: flex-start;\n    }\n\n    .kind {\n      flex: none;\n      display: grid;\n      place-items: center;\n      width: 32px;\n      height: 32px;\n      border-radius: 8px;\n      background: var(--ui-accent-wash, color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent));\n      color: var(--ui-accent, var(--md-sys-color-primary));\n      --md-icon-size: 18px;\n    }\n\n    .names {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .names strong {\n      display: block;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .names small {\n      display: block;\n      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n    }\n\n    .badge {\n      flex: none;\n      padding: 1px 8px;\n      border-radius: 999px;\n      background: var(--ui-panel-2, var(--md-sys-color-surface-container));\n      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n      font-size: var(--ui-t-micro, 11px);\n      font-variant-numeric: tabular-nums;\n    }\n\n    .row {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: 2px;\n    }\n\n    .row .placed {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      margin-right: auto;\n      color: var(--ui-good, #2e7d32);\n      font-size: var(--ui-t-small, 12px);\n      --md-icon-size: 16px;\n    }\n\n    .row .spacer {\n      margin-right: auto;\n    }\n\n    button.icon {\n      display: grid;\n      place-items: center;\n      width: 30px;\n      height: 30px;\n      padding: 0;\n      border: 0;\n      border-radius: 8px;\n      background: transparent;\n      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n      cursor: pointer;\n      --md-icon-size: 18px;\n    }\n\n    button.icon:hover {\n      background: var(--ui-hover, var(--md-sys-color-surface-container-high));\n      color: var(--ui-ink, var(--md-sys-color-on-surface));\n    }\n\n    .empty {\n      padding: 36px 12px;\n      text-align: center;\n      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n    }\n  `\n\n  @state() private which: 'mine' | 'shared' = 'mine'\n  @state() private cards?: CardItem[]\n  @state() private error?: string\n\n  private onChanged = () => this.load()\n\n  connectedCallback() {\n    super.connectedCallback()\n    window.addEventListener(DASHBOARD_CHANGED, this.onChanged)\n    this.load()\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener(DASHBOARD_CHANGED, this.onChanged)\n    super.disconnectedCallback()\n  }\n\n  private async load() {\n    try {\n      this.cards = await cardApi.library(this.which)\n      this.error = undefined\n    } catch (error: any) {\n      this.error = error?.message ?? String(error)\n    }\n  }\n\n  private show(which: 'mine' | 'shared') {\n    this.which = which\n    this.cards = undefined\n    this.load()\n  }\n\n  render() {\n    return html`<div class=\"tabs\" role=\"tablist\">\n        <button role=\"tab\" aria-selected=${this.which === 'mine' ? 'true' : 'false'} @click=${() => this.show('mine')}>${t('ai-dashboard.library.mine')}</button>\n        <button role=\"tab\" aria-selected=${this.which === 'shared' ? 'true' : 'false'} @click=${() => this.show('shared')}>${t('ai-dashboard.library.shared')}</button>\n      </div>\n      ${this.error ? html`<p class=\"empty\">${this.error}</p>` : nothing}\n      ${this.cards && !this.cards.length ? html`<p class=\"empty\">${t(this.which === 'mine' ? 'ai-dashboard.library.none-mine' : 'ai-dashboard.library.none-shared')}</p>` : nothing}\n      <ul>\n        ${(this.cards ?? []).map(card => this.renderCard(card))}\n      </ul>`\n  }\n\n  private renderCard(card: CardItem) {\n    const owner = card.access === 'owner'\n    const icon = (action: () => unknown, name: string, key: string) => html`<button class=\"icon\" title=${t(key)} aria-label=${t(key)} @click=${action}><md-icon>${name}</md-icon></button>`\n    const line = [card.description, ownershipLine(card, t)].filter(Boolean).join(' · ')\n    return html`<li>\n      <div class=\"head\">\n        <span class=\"kind\"><md-icon>${viewIcon(card.definition)}</md-icon></span>\n        <span class=\"names\"><strong title=${card.name}>${card.name}</strong>${line ? html`<small>${line}</small>` : nothing}</span>\n        <span class=\"badge\">v${card.version}</span>\n      </div>\n      <div class=\"row\">\n        ${card.placed\n          ? html`<span class=\"placed\"><md-icon>check_circle</md-icon>${t('ai-dashboard.library.placed')}</span>`\n          : html`<md-filled-tonal-button @click=${() => this.place(card)}>${t('ai-dashboard.library.place')}</md-filled-tonal-button><span class=\"spacer\"></span>`}\n        ${owner ? icon(() => openCardShare(card), 'share', 'ai-dashboard.card.share') : nothing}\n        ${owner ? icon(() => openCardRename(card), 'edit', 'ai-dashboard.card.rename') : nothing}\n        ${owner ? icon(() => openCardVersions(card), 'history', 'ai-dashboard.card.versions') : nothing}\n        ${icon(() => this.copy(card), 'content_copy', owner ? 'ai-dashboard.card.duplicate' : 'ai-dashboard.card.copy')}\n        ${owner ? icon(() => this.deleteCard(card), 'delete_outline', 'ai-dashboard.card.delete') : nothing}\n      </div>\n    </li>`\n  }\n\n  private async place(card: CardItem) {\n    await this.attempt(async () => {\n      await cardApi.place(card.id)\n      notify({ level: 'info', message: t('ai-dashboard.text.placed', { name: card.name }) })\n    })\n  }\n\n  private async copy(card: CardItem) {\n    await this.attempt(async () => {\n      await cardApi.copy(card.id)\n      notify({ level: 'info', message: t('ai-dashboard.text.copied', { name: card.name }) })\n    })\n  }\n\n  private async deleteCard(card: CardItem) {\n    const sure = await OxPrompt.open({\n      title: t('ai-dashboard.card.delete'),\n      text: t(card.shares?.length ? 'ai-dashboard.text.delete-shared' : 'ai-dashboard.text.delete', { name: card.name }),\n      confirmButton: { text: t('ai-dashboard.card.delete') },\n      cancelButton: { text: t('ai-dashboard.button.cancel') }\n    })\n    if (!sure) return\n    await this.attempt(() => cardApi.remove(card.id))\n  }\n\n  private async attempt(work: () => Promise<unknown>) {\n    try {\n      await work()\n      dashboardChanged()\n    } catch (error: any) {\n      notify({ level: 'error', message: error?.message ?? String(error) })\n    }\n  }\n}\n"]}

package/dist-client/components/dashboard-card.d.ts

@@ -0,0 +1,35 @@
+import '@material/web/icon/icon.js';
+import '@things-factory/ai-assistant/dist-client/index.js';
+import { LitElement, nothing } from 'lit';
+import { type CardItem } from '../utils/card-api.js';
+export type CardAction = 'refresh' | 'ai' | 'rename' | 'share' | 'versions' | 'copy' | 'unplace' | 'left' | 'right' | 'wider' | 'narrower' | 'taller' | 'shorter';
+declare const AiDashboardCard_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class AiDashboardCard extends AiDashboardCard_base {
+    static styles: import("lit").CSSResult;
+    card?: CardItem;
+    /** The place's size, when it is on the dashboard. */
+    width: number;
+    height: number;
+    editing: boolean;
+    first: boolean;
+    last: boolean;
+    private run?;
+    private failed?;
+    private loading;
+    private menu;
+    private readAt?;
+    private readingFor?;
+    private closeMenu;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changes: Map<string, unknown>): void;
+    /** Draws the card again from the data - the server runs its definition as the viewer. */
+    refresh(): Promise<void>;
+    private act;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    private renderMenu;
+    private renderBody;
+    private renderFooter;
+    private renderEdit;
+}
+export {};