@floegence/floe-webapp-core 0.66.0 → 0.67.1

package/dist/ui.css

@@ -478,93 +478,6 @@
      Text Animation Effects - Minimal and Professional
      ============================================================================= */
 
-  /* Opt-in progress only: text keeps one accessible copy and surface paint
-   * sits below content. The host owns operation state and removes the attribute
-   * on settlement. Both published CSS entries expose this contract. */
-  @keyframes floe-progress-shimmer {
-    0% {
-      background-position: 100% center;
-    }
-    100% {
-      background-position: 0% center;
-    }
-  }
-
-  :is([data-floe-progress-shimmer='text'], .processing-text-shimmer) {
-    color: var(--floe-progress-text-base);
-  }
-
-  :is([data-floe-progress-shimmer='text'], .processing-text-shimmer)::selection,
-  :is([data-floe-progress-shimmer='text'], .processing-text-shimmer) ::selection {
-    -webkit-text-fill-color: var(--selection-fg);
-  }
-
-  @supports (background-clip: text) {
-    :is([data-floe-progress-shimmer='text'], .processing-text-shimmer) {
-      background-image: linear-gradient(90deg in srgb, var(--floe-progress-text-base) 43%, var(--floe-progress-text-peak) 46%, var(--floe-progress-text-peak) 54%, var(--floe-progress-text-base) 57%);
-      background-size: 250% 100%;
-      -webkit-background-clip: text;
-      background-clip: text;
-      -webkit-text-fill-color: transparent;
-      animation: floe-progress-shimmer 2.4s linear infinite;
-    }
-  }
-
-  [data-floe-progress-shimmer='surface'] {
-    --floe-progress-surface-base: var(--floe-progress-surface-background, var(--floe-progress-primary-base));
-    /* The calibrated busy fill reserves contrast for an additive white reflection. */
-    --floe-progress-surface-peak: color-mix(in srgb, var(--floe-progress-surface-base), white var(--floe-progress-primary-white-mix));
-    position: relative;
-    isolation: isolate;
-  }
-
-  /* A busy control can be unavailable for a second submission while its
-   * progress remains fully legible. Disabled input semantics still apply. */
-  [data-floe-progress-shimmer='surface']:disabled {
-    opacity: 1 !important;
-  }
-
-  [data-floe-progress-shimmer='surface']::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-    border-radius: inherit;
-    pointer-events: none;
-    background-image: linear-gradient(100deg in srgb, var(--floe-progress-surface-base) 46%, var(--floe-progress-surface-peak) 50%, var(--floe-progress-surface-base) 54%);
-    background-size: 250% 100%;
-    animation: floe-progress-shimmer 2.4s linear infinite;
-  }
-
-  @media (prefers-reduced-motion: reduce), (forced-colors: active) {
-    :is([data-floe-progress-shimmer='text'], .processing-text-shimmer) {
-      animation: none;
-      background-image: none;
-      -webkit-text-fill-color: currentColor;
-    }
-
-    [data-floe-progress-shimmer='surface']::before {
-      animation: none;
-      background-image: none;
-      background-color: var(--floe-progress-surface-base);
-    }
-  }
-
-  @media (forced-colors: active) {
-    [data-floe-progress-shimmer='surface']::before {
-      content: none;
-    }
-
-    :is([data-floe-progress-shimmer='text'], .processing-text-shimmer) {
-      color: CanvasText;
-    }
-
-    :is([data-floe-progress-shimmer='text'], .processing-text-shimmer)::selection,
-    :is([data-floe-progress-shimmer='text'], .processing-text-shimmer) ::selection {
-      -webkit-text-fill-color: HighlightText;
-    }
-  }
-
   /* Glow - subtle pulsing text */
   @keyframes text-glow {
     0%,

package/dist/window-status.css

@@ -0,0 +1,194 @@
+/* Explicit host-window opt-in. Never mount this layer in a draggable window,
+ * a Workbench widget, or a movable canvas. Hosts own inertness and lifecycle.
+ * Neutral surfaces are opaque: access gates must not expose protected content.
+ * Load Floe theme tokens and progress-shimmer.css alongside this asset.
+ */
+@layer components {
+  .floe-window-status {
+    box-sizing: border-box;
+    position: absolute;
+    inset: 0;
+    display: flex;
+    overflow: auto;
+    padding: 40px 24px;
+    color: var(--foreground);
+    background:
+      radial-gradient(
+        ellipse at 12% 23%,
+        color-mix(in srgb, var(--foreground) 2%, transparent),
+        transparent 45%
+      ),
+      var(--background);
+    font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
+    font-size: 13px;
+    line-height: 1.7;
+    isolation: isolate;
+  }
+  .floe-window-status[data-backdrop='workspace'] {
+    background: color-mix(in srgb, var(--background) 82%, transparent);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+  }
+  .floe-window-status__content {
+    box-sizing: border-box;
+    margin: auto;
+    padding: 16px;
+    width: 100%;
+    max-width: 440px;
+    text-align: center;
+    overflow-wrap: anywhere;
+  }
+  .floe-window-status__illustration {
+    display: block;
+    width: 240px;
+    max-width: 100%;
+    height: 112px;
+    margin: 0 auto 30px;
+    color: var(--muted-foreground);
+  }
+  .floe-window-status__illustration .soft {
+    opacity: 0.75;
+  }
+  .floe-window-status__illustration .quiet {
+    opacity: 0.4;
+  }
+  .floe-window-status__identity {
+    margin: 0 0 14px;
+    color: var(--muted-foreground);
+    font-size: 12px;
+    font-weight: 550;
+  }
+  .floe-window-status__title {
+    margin: 0;
+    color: var(--foreground);
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 1.4;
+    letter-spacing: -0.025em;
+  }
+  .floe-window-status__description {
+    max-width: 352px;
+    margin: 15px auto 0;
+    color: var(--muted-foreground);
+    font-size: 13px;
+    line-height: 1.9;
+    text-wrap: pretty;
+  }
+  .floe-window-status__activity {
+    max-width: 360px;
+    margin: 28px auto 0;
+    padding: 17px 8px;
+    border-block: 1px solid var(--border);
+    font-variant-numeric: tabular-nums;
+  }
+  .floe-window-status__label {
+    margin: 0 0 9px;
+    color: var(--muted-foreground);
+    font-size: 11px;
+  }
+  .floe-window-status__actions {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 9px;
+    margin-top: 24px;
+  }
+  .floe-window-status__button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    min-height: 40px;
+    padding: 8px 17px;
+    border: 1px solid transparent;
+    border-radius: 5px;
+    background: var(--foreground);
+    color: var(--background);
+    font: inherit;
+    font-size: 12px;
+    font-weight: 550;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  .floe-window-status__button:hover {
+    opacity: 0.88;
+  }
+  .floe-window-status__button:focus-visible {
+    outline: 2px solid var(--ring, var(--foreground));
+    outline-offset: 3px;
+  }
+  .floe-window-status__button:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  .floe-window-status__button[data-variant='secondary'] {
+    background: transparent;
+    color: var(--muted-foreground);
+  }
+  .floe-window-status__button svg {
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+  }
+  .floe-window-status__details {
+    max-width: 360px;
+    margin: 28px auto 0;
+    color: var(--muted-foreground);
+    font-size: 11px;
+    text-align: start;
+  }
+  .floe-window-status__details summary {
+    width: fit-content;
+    margin: auto;
+    padding: 5px 6px;
+    cursor: pointer;
+  }
+  .floe-window-status__details pre {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    font: inherit;
+  }
+  .floe-window-status__form {
+    max-width: 316px;
+    margin: 27px auto 0;
+    text-align: start;
+  }
+  @media (max-height: 700px) {
+    .floe-window-status {
+      padding: 20px 16px;
+    }
+    .floe-window-status__illustration {
+      height: 72px;
+      margin-bottom: 16px;
+    }
+    .floe-window-status__activity,
+    .floe-window-status__form {
+      margin-top: 20px;
+    }
+    .floe-window-status__details {
+      margin-top: 18px;
+    }
+  }
+  @media (max-width: 600px) {
+    .floe-window-status {
+      padding-inline: 14px;
+    }
+    .floe-window-status__content {
+      padding-inline: 10px;
+    }
+    .floe-window-status__title {
+      font-size: 22px;
+    }
+    .floe-window-status__illustration {
+      width: 200px;
+    }
+  }
+  @media (prefers-reduced-transparency: reduce), (forced-colors: active) {
+    .floe-window-status[data-backdrop='workspace'] {
+      background: var(--background);
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+    }
+  }
+}

package/dist/window-status.d.ts

@@ -0,0 +1,9 @@
+export declare const windowStatusRefreshSvg: string;
+declare const artwork: {
+    readonly access: "<path class=\"quiet\" d=\"M72 29H51v52h21m96-52h21v52h-21M73 55h19m56 0h19\"/><path class=\"soft\" d=\"m120 16 27 10v29c0 24-27 36-27 36s-27-12-27-36V26z\"/><rect x=\"109\" y=\"47\" width=\"22\" height=\"21\" rx=\"3\"/><path d=\"M113 47v-7a7 7 0 0 1 14 0v7m-7 8v5\"/><circle class=\"quiet\" cx=\"51\" cy=\"55\" r=\"3\"/><circle class=\"quiet\" cx=\"189\" cy=\"55\" r=\"3\"/>";
+    readonly editor: "<rect x=\"56\" y=\"21\" width=\"128\" height=\"76\" rx=\"6\"/><path class=\"soft\" d=\"M56 38h128M77 38v59\"/><circle cx=\"65\" cy=\"29\" r=\"1\" fill=\"currentColor\"/><circle cx=\"71\" cy=\"29\" r=\"1\" fill=\"currentColor\"/><circle cx=\"77\" cy=\"29\" r=\"1\" fill=\"currentColor\"/><path class=\"quiet\" d=\"M64 48h5m-5 8h5m-5 8h5m-5 8h5M43 47H31v25h12m154-25h12v25h-12\"/><path d=\"m111 55-9 11 9 11m38-22 9 11-9 11m-15-27-9 31\"/>";
+    readonly service: "<rect x=\"26\" y=\"33\" width=\"48\" height=\"39\" rx=\"5\"/><path class=\"soft\" d=\"M26 44h48\"/><circle cx=\"33\" cy=\"39\" r=\"1\" fill=\"currentColor\"/><circle cx=\"39\" cy=\"39\" r=\"1\" fill=\"currentColor\"/><rect x=\"171\" y=\"25\" width=\"43\" height=\"23\" rx=\"4\"/><rect x=\"171\" y=\"60\" width=\"43\" height=\"23\" rx=\"4\"/><path class=\"soft\" d=\"M179 35h12m-12 35h12\"/><circle cx=\"205\" cy=\"36\" r=\"1.5\"/><circle cx=\"205\" cy=\"71\" r=\"1.5\"/><path class=\"quiet\" d=\"M82 54h20m36 0h22m0 0v-18h11m-11 18v18h11\"/><circle cx=\"120\" cy=\"54\" r=\"13\" class=\"soft\"/><path d=\"M120 47v8m0 5v.1\"/>";
+};
+/** Returns fixed, trusted SVG markup. Host copy and user input never enter SVG. */
+export declare function windowStatusIllustrationSvg(kind: keyof typeof artwork): string;
+export {};

package/dist/window-status.js

@@ -0,0 +1,13 @@
+import { refreshIconPaths as t } from "./components/icons/refreshPaths.js";
+const i = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${t.map((r) => `<path d="${r}"/>`).join("")}</svg>`, c = {
+  access: '<path class="quiet" d="M72 29H51v52h21m96-52h21v52h-21M73 55h19m56 0h19"/><path class="soft" d="m120 16 27 10v29c0 24-27 36-27 36s-27-12-27-36V26z"/><rect x="109" y="47" width="22" height="21" rx="3"/><path d="M113 47v-7a7 7 0 0 1 14 0v7m-7 8v5"/><circle class="quiet" cx="51" cy="55" r="3"/><circle class="quiet" cx="189" cy="55" r="3"/>',
+  editor: '<rect x="56" y="21" width="128" height="76" rx="6"/><path class="soft" d="M56 38h128M77 38v59"/><circle cx="65" cy="29" r="1" fill="currentColor"/><circle cx="71" cy="29" r="1" fill="currentColor"/><circle cx="77" cy="29" r="1" fill="currentColor"/><path class="quiet" d="M64 48h5m-5 8h5m-5 8h5m-5 8h5M43 47H31v25h12m154-25h12v25h-12"/><path d="m111 55-9 11 9 11m38-22 9 11-9 11m-15-27-9 31"/>',
+  service: '<rect x="26" y="33" width="48" height="39" rx="5"/><path class="soft" d="M26 44h48"/><circle cx="33" cy="39" r="1" fill="currentColor"/><circle cx="39" cy="39" r="1" fill="currentColor"/><rect x="171" y="25" width="43" height="23" rx="4"/><rect x="171" y="60" width="43" height="23" rx="4"/><path class="soft" d="M179 35h12m-12 35h12"/><circle cx="205" cy="36" r="1.5"/><circle cx="205" cy="71" r="1.5"/><path class="quiet" d="M82 54h20m36 0h22m0 0v-18h11m-11 18v18h11"/><circle cx="120" cy="54" r="13" class="soft"/><path d="M120 47v8m0 5v.1"/>'
+};
+function h(r) {
+  return `<svg class="floe-window-status__illustration" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 112" fill="none" aria-hidden="true"><g stroke="currentColor" stroke-width="1.45" stroke-linecap="round" stroke-linejoin="round">${c[r]}</g></svg>`;
+}
+export {
+  h as windowStatusIllustrationSvg,
+  i as windowStatusRefreshSvg
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.66.0",
+  "version": "0.67.1",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -105,6 +105,13 @@
     "./resource-cache": {
       "types": "./dist/resource-cache.d.ts",
       "import": "./dist/resource-cache.js"
+    },
+    "./progress-shimmer.css": "./dist/progress-shimmer.css",
+    "./window-status.css": "./dist/window-status.css",
+    "./window-status": {
+      "types": "./dist/window-status.d.ts",
+      "import": "./dist/window-status.js",
+      "default": "./dist/window-status.js"
     }
   },
   "files": [