@revenexx/studio-shared 0.3.2 → 0.3.3

package/dist/runtime/components/Dashboard/DashboardWidgetPreview.vue

@@ -0,0 +1,124 @@
+<script setup>
+defineProps({
+  shape: { type: String, required: true },
+  dimmed: { type: Boolean, required: false, default: false }
+});
+const BARS = [38, 62, 45, 80, 55, 92, 48, 70, 60, 85, 52, 74];
+const RANKS = [100, 72, 54, 38, 26];
+const FUNNEL = [100, 68, 34];
+</script>
+
+<template>
+  <div
+    class="pointer-events-none flex h-24 w-full flex-col justify-center gap-1.5 overflow-hidden rounded-md border border-black/[0.06] bg-gradient-to-b from-white to-black/[0.02] px-3 py-2.5"
+    :class="dimmed ? 'opacity-40 grayscale' : ''"
+    aria-hidden="true"
+  >
+    <!-- One number on a card — what a manifest `EntityCount` draws (PE-618). -->
+    <div v-if="shape === 'count'" class="flex h-full flex-col justify-center px-1">
+      <div class="h-1 w-1/3 rounded-full bg-black/10" />
+      <div class="mt-2 h-5 w-1/2 rounded-sm bg-black/25" />
+      <div class="mt-2 h-1 w-2/5 rounded-full bg-black/10" />
+    </div>
+
+    <!-- Four tiles with a number and a spark under each. -->
+    <div v-else-if="shape === 'kpi-row'" class="grid grid-cols-4 gap-1.5">
+      <div v-for="n in 4" :key="n" class="rounded border border-black/[0.06] bg-white px-1.5 py-1">
+        <div class="h-1 w-3/4 rounded-full bg-black/10" />
+        <div class="mt-1 h-2 w-2/3 rounded-sm bg-black/25" />
+        <div class="mt-1 h-0.5 w-full rounded-full bg-violet-400/60" />
+      </div>
+    </div>
+
+    <!-- Daily bars. -->
+    <div v-else-if="shape === 'bar-chart'" class="flex h-full items-end gap-[3px]">
+      <div
+        v-for="(h, i) in BARS"
+        :key="i"
+        class="flex-1 rounded-t-[2px] bg-violet-500/70"
+        :style="{ height: `${h}%` }"
+      />
+    </div>
+
+    <!-- Label + value + proportional bar, repeated. -->
+    <div v-else-if="shape === 'ranked-list'" class="flex flex-col gap-1.5">
+      <div v-for="(w, i) in RANKS.slice(0, 4)" :key="i">
+        <div class="flex items-center justify-between gap-2">
+          <div class="h-1 rounded-full bg-black/15" :style="{ width: `${30 + i % 3 * 14}%` }" />
+          <div class="h-1 w-5 rounded-full bg-black/20" />
+        </div>
+        <div class="mt-0.5 h-1 rounded-full bg-black/[0.06]">
+          <div class="h-full rounded-full bg-violet-500/70" :style="{ width: `${w}%` }" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Narrowing stages. -->
+    <div v-else-if="shape === 'funnel'" class="flex flex-col gap-2">
+      <div v-for="(w, i) in FUNNEL" :key="i" class="flex items-center gap-2">
+        <div class="h-1 w-8 rounded-full bg-black/15" />
+        <div class="h-2 flex-1 rounded-full bg-black/[0.06]">
+          <div class="h-full rounded-full" :class="i === 2 ? 'bg-emerald-500/70' : 'bg-violet-500/70'" :style="{ width: `${w}%` }" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Two or four big figures side by side. -->
+    <div v-else-if="shape === 'stat-split'" class="grid grid-cols-2 gap-2">
+      <div v-for="n in 4" :key="n" class="flex flex-col gap-1">
+        <div class="h-1 w-2/3 rounded-full bg-black/10" />
+        <div class="h-2.5 w-1/2 rounded-sm bg-black/25" />
+      </div>
+    </div>
+
+    <!-- Rows with an icon chip, two lines and a time on the right. -->
+    <div v-else-if="shape === 'feed'" class="flex flex-col gap-1.5">
+      <div v-for="n in 4" :key="n" class="flex items-center gap-2">
+        <div class="size-3.5 shrink-0 rounded bg-violet-400/40" />
+        <div class="min-w-0 flex-1">
+          <div class="h-1 rounded-full bg-black/15" :style="{ width: `${52 + n % 3 * 14}%` }" />
+          <div class="mt-0.5 h-1 w-1/3 rounded-full bg-black/[0.08]" />
+        </div>
+        <div class="h-1 w-3 shrink-0 rounded-full bg-black/10" />
+      </div>
+    </div>
+
+    <!-- Tiles with a state dot. -->
+    <div v-else-if="shape === 'status-grid'" class="grid grid-cols-2 gap-1.5">
+      <div v-for="n in 4" :key="n" class="flex items-center gap-1.5 rounded border border-black/[0.06] bg-white px-1.5 py-1.5">
+        <span class="size-1.5 rounded-full" :class="n === 3 ? 'bg-amber-500' : 'bg-emerald-500'" />
+        <div class="h-1 flex-1 rounded-full bg-black/12" />
+      </div>
+    </div>
+
+    <!-- Paragraph. -->
+    <div v-else-if="shape === 'text'" class="flex flex-col gap-1.5">
+      <div v-for="(w, i) in [96, 88, 92, 54]" :key="i" class="h-1.5 rounded-full bg-black/[0.10]" :style="{ width: `${w}%` }" />
+    </div>
+
+    <!-- Link rows with a chevron. -->
+    <div v-else-if="shape === 'links'" class="flex flex-col gap-1.5">
+      <div v-for="n in 4" :key="n" class="flex items-center justify-between gap-2 rounded px-1 py-1" :class="n === 1 ? 'bg-black/[0.03]' : ''">
+        <div class="h-1 rounded-full bg-black/15" :style="{ width: `${34 + n % 3 * 16}%` }" />
+        <div class="size-1.5 rotate-45 border-r border-t border-black/20" />
+      </div>
+    </div>
+
+    <!-- A greeting line with a row of action chips. -->
+    <div v-else-if="shape === 'greeting'" class="flex flex-col gap-2">
+      <div class="h-1 w-1/4 rounded-full bg-black/10" />
+      <div class="h-3 w-2/3 rounded-sm bg-black/20" />
+      <div class="flex gap-1.5">
+        <div v-for="n in 5" :key="n" class="size-4 rounded bg-black/[0.06]" />
+      </div>
+    </div>
+
+    <!-- Fallback: small multiples. -->
+    <div v-else class="grid grid-cols-3 gap-1.5">
+      <div v-for="n in 3" :key="n" class="rounded border border-black/[0.06] bg-white p-1.5">
+        <div class="h-1 w-2/3 rounded-full bg-black/10" />
+        <div class="mt-1 h-1 w-full rounded-full bg-violet-400/50" />
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/Dashboard/DashboardWidgetPreview.vue.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The picture on a widget's library card (PE-480).
+ *
+ * A schematic, not a screenshot and not the live widget. The Integration
+ * Studio's template gallery draws its preview from the workflow definition for
+ * the same reason: a maintained screenshot goes stale the first time the widget
+ * changes and nobody notices. Rendering the real widget instead would be
+ * accurate but would fire every widget's queries the moment the library opens.
+ *
+ * So each widget declares a `preview` shape, and this draws it — pure layout,
+ * no data, no requests. It says what the widget *looks* like, which is what a
+ * person picking from a list actually needs.
+ */
+import type { WidgetPreviewShape } from '../../lib/widgetRegistry.js';
+type __VLS_Props = {
+    shape: WidgetPreviewShape;
+    dimmed?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    dimmed: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/DataTable/DataTable.d.vue.ts

@@ -1,3 +1,4 @@
+import type { Facet, FacetSelection } from '../../lib/facets.js';
 import type { DataTableColumn, DataTableFilter, DataTableRail, DataTableSavedViews, DataTableState, DataTableViewMode, RowKey, SortState } from './types.js';
 declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
@@ -5,9 +6,10 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         readonly "onUpdate:page"?: ((value: number) => any) | undefined;
         readonly "onUpdate:viewMode"?: ((value: string) => any) | undefined;
         readonly "onUpdate:railOpen"?: ((value: boolean) => any) | undefined;
+        readonly "onUpdate:facetSelection"?: ((value: FacetSelection) => any) | undefined;
         readonly onRowClick?: ((row: T) => any) | undefined;
         readonly onStateChange?: ((state: DataTableState) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:sort" | "onUpdate:page" | "onUpdate:viewMode" | "onUpdate:railOpen" | "onRowClick" | "onStateChange"> & ({
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:sort" | "onUpdate:page" | "onUpdate:viewMode" | "onUpdate:railOpen" | "onUpdate:facetSelection" | "onRowClick" | "onStateChange"> & ({
         data: T[];
         columns: DataTableColumn<T>[];
         rowKey: RowKey<T>;
@@ -28,6 +30,25 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         /** Built-in status/dimension filter pills (static mode). One dimension, or
          *  several (each renders as its own sub-menu). */
         filterTabs?: DataTableFilter<T> | DataTableFilter<T>[];
+        /**
+         * The surface's declared dimensions, as one facet model (PE-6xx).
+         *
+         * The THIRD filter path, and the one the others are being folded into. It
+         * differs from `filterTabs` in who does the work: those are filtered in
+         * memory here, which a server-paged list cannot use — a facet count taken
+         * over one page of fifty rows out of twenty-three thousand is a number
+         * nobody can reconcile with the table under it. Here the surface owns the
+         * query and the counts, and this component only draws the control and hands
+         * back a committed selection (`v-model:facet-selection`).
+         *
+         * EVERY declared dimension lives in this one panel, committed together, and
+         * reads back in one chip strip under the toolbar. There is deliberately no
+         * second placement: a tree pinned in a left column beside a panel is two
+         * places to look and two commit rules for one question.
+         */
+        facets?: Facet[];
+        /** Say which facet each chip belongs to (see `FacetChips.showFacet`). */
+        chipFacetLabels?: boolean;
         /** Saved views control — the surface supplies snapshot/apply, the table
          *  owns the control, the storage and the dialogs. */
         savedViews?: DataTableSavedViews | null;
@@ -52,8 +73,13 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
          * sitting above it. That is not a detail: a scrollbar takes width from the
          * scrolling box, so a header outside it stays wider than the rows and every
          * column drifts by however wide the scrollbar is.
+         *
+         * `'fit'` measures instead of guessing: the rows get whatever height is left
+         * in the surrounding scroll container, so the table ends where the page ends
+         * and nothing below it is pushed out of sight. A short list still ends after
+         * its last row — the measurement is a MAXIMUM, not a height.
          */
-        scrollBody?: boolean | {
+        scrollBody?: boolean | "fit" | {
             maxHeight?: string;
         };
         pagination?: boolean | {
@@ -74,6 +100,13 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         page?: number;
         viewMode?: string;
         railOpen?: boolean;
+        /**
+         * The committed facet selection. Two-way so a chip removed under the toolbar,
+         * a facet picked in the surface's pinned rail and the panel's own Apply all
+         * write to one place — and so the surface can seed it from a saved view or a
+         * URL without this component holding a second copy to drift from.
+         */
+        facetSelection?: FacetSelection;
     }) & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
@@ -101,7 +134,7 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
     } & {
         empty?: (props: {}) => any;
     };
-    emit: (((evt: "rowClick", row: T) => void) & ((evt: "stateChange", state: DataTableState) => void)) & (((evt: "update:sort", value: SortState) => void) & ((evt: "update:page", value: number) => void) & ((evt: "update:viewMode", value: string) => void) & ((evt: "update:railOpen", value: boolean) => void));
+    emit: (((evt: "rowClick", row: T) => void) & ((evt: "stateChange", state: DataTableState) => void)) & (((evt: "update:sort", value: SortState) => void) & ((evt: "update:page", value: number) => void) & ((evt: "update:viewMode", value: string) => void) & ((evt: "update:railOpen", value: boolean) => void) & ((evt: "update:facetSelection", value: FacetSelection) => void));
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };