@floegence/floe-webapp-core 0.86.34 → 0.86.37

package/dist/chat.css

@@ -1847,7 +1847,7 @@ pre.chat-md-code-block *::selection,
 @layer components {
   .chat-media { position: relative; display: flex; flex-direction: column; width: fit-content; max-width: min(100%, 42rem); min-width: 0; margin: .8rem 0 1rem; color: var(--foreground); text-align: left; }
   .chat-media[data-media-kind="html"] { width: 100%; }
-  .chat-media[data-media-kind="image"] { width: min(100%, 36rem); }
+  .chat-media[data-media-kind="image"] { width: 100%; }
   .chat-media-viewport { display: block; width: 100%; min-width: 0; overflow: hidden; }
   .chat-media[data-media-kind="image"] .chat-media-viewport,
   .chat-media[data-media-kind="video"] .chat-media-viewport { aspect-ratio: 16 / 9; }
@@ -1888,12 +1888,18 @@ pre.chat-md-code-block *::selection,
   @media (max-width: 480px) { .chat-media[data-media-kind="html"] .chat-media-viewport, .chat-media-html { height: 18rem; } .chat-media-expanded[data-media-kind="html"] .chat-media-viewport { height: min(70vh, 48rem); } }
 }
 
-/* HTML outputs retain one quiet, bounded canvas throughout their lifecycle. */
+/* Images and HTML retain one quiet, bounded canvas throughout their lifecycle. */
 @layer components {
-  .chat-html-canvas { --canvas-inset: clamp(1rem, 5%, 3rem); position: relative; isolation: isolate; display: block; width: 100%; height: 28rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--border) 65%, transparent); border-radius: 1rem; background: color-mix(in srgb, var(--muted) 38%, var(--background)); }
+  .chat-html-canvas, .chat-media[data-media-kind="image"] .chat-media-viewport { position: relative; isolation: isolate; display: block; width: 100%; overflow: hidden; border: 1px solid color-mix(in srgb, var(--border) 65%, transparent); border-radius: 1rem; background: color-mix(in srgb, var(--muted) 38%, var(--background)); }
+  .chat-html-canvas { --canvas-inset: clamp(1rem, 5%, 3rem); height: 28rem; }
+  .chat-media[data-media-kind="image"] .chat-media-viewport { min-height: 14rem; padding: 3.5rem clamp(1rem, 5%, 2rem) 1.5rem; border: 0; }
+  .chat-media[data-media-kind="image"] .chat-media-viewport::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; }
+  .chat-media[data-media-kind="image"] .chat-media-placeholder { padding: 0; border-radius: 0; background: transparent; }
+  .chat-media[data-media-kind="image"] :is(.chat-media-image-button, .chat-media-image) { border-radius: .25rem; }
+  .chat-media[data-media-kind="image"] .chat-media-actions { top: .875rem; right: .875rem; gap: .5rem; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; color: var(--muted-foreground); opacity: 1; transform: none; }
   .chat-media-expanded .chat-html-canvas { height: min(78vh, 52rem); }
   .chat-html-dots, .chat-html-sheen { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
-  .chat-html-dots { background-image: radial-gradient(circle, color-mix(in srgb, var(--muted-foreground) 24%, transparent) .75px, transparent .9px); background-size: 20px 20px; background-position: 9px 9px; }
+  .chat-html-dots, .chat-media[data-media-kind="image"] .chat-media-viewport::before { background-image: radial-gradient(circle, color-mix(in srgb, var(--muted-foreground) 24%, transparent) .75px, transparent .9px); background-size: 20px 20px; background-position: 9px 9px; }
   .chat-html-sheen { opacity: 0; background: linear-gradient(115deg, transparent 25%, color-mix(in srgb, var(--foreground) 20%, transparent) 49%, transparent 73%); background-size: 250% 100%; mask-image: radial-gradient(circle, black .9px, transparent 1.1px); mask-size: 20px 20px; mask-position: 9px 9px; }
   .chat-html-canvas:is([data-state="generating"], [data-state="loading"]) .chat-html-sheen { opacity: 1; animation: chat-html-sweep 3.4s ease-in-out infinite; }
   .chat-html-sheet, .chat-html-source { position: absolute; inset: 3.5rem var(--canvas-inset) 4.25rem; display: flex; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--border) 75%, transparent); border-radius: .625rem; box-shadow: 0 14px 40px rgb(0 0 0 / .06), 0 2px 6px rgb(0 0 0 / .03); background: var(--background); }
@@ -1903,10 +1909,10 @@ pre.chat-md-code-block *::selection,
   .chat-html-source { display: block; margin: 0; padding: 1.25rem; overflow: auto; overscroll-behavior: contain; white-space: pre; font: .6875rem/1.85 var(--font-mono); color: var(--foreground); }
   .chat-html-source code { padding: 0; color: inherit; background: none; font: inherit; }
   .chat-html-loading { position: absolute; inset: 3.5rem var(--canvas-inset); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; text-align: center; color: var(--muted-foreground); font-size: .75rem; }
-  .chat-html-orb { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.125rem; height: 2.125rem; padding: 0; border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); border-radius: 50%; color: var(--muted-foreground); background: color-mix(in srgb, var(--background) 88%, transparent); box-shadow: 0 2px 5px rgb(0 0 0 / .035); backdrop-filter: blur(12px); cursor: pointer; transition: color 140ms, background 140ms, transform 140ms; }
-  .chat-html-orb:hover { color: var(--foreground); background: var(--background); transform: translateY(-1px); }
+  .chat-html-orb, .chat-media[data-media-kind="image"] .chat-media-action { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.125rem; height: 2.125rem; padding: 0; border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); border-radius: 50%; color: var(--muted-foreground); background: color-mix(in srgb, var(--background) 88%, transparent); box-shadow: 0 2px 5px rgb(0 0 0 / .035); backdrop-filter: blur(12px); cursor: pointer; transition: color 140ms, background 140ms, transform 140ms; }
+  .chat-html-orb:hover, .chat-media[data-media-kind="image"] .chat-media-action:hover { color: var(--foreground); background: var(--background); transform: translateY(-1px); }
   .chat-html-orb[aria-pressed="true"] { color: var(--foreground); background: var(--muted); }
-  .chat-html-orb:focus-visible, .chat-html-source:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
+  .chat-html-orb:focus-visible, .chat-html-source:focus-visible, .chat-media[data-media-kind="image"] .chat-media-action:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
   .chat-html-orb svg { width: .9375rem; height: .9375rem; }
   .chat-html-expand { position: absolute; top: .875rem; right: .875rem; }
   .chat-html-controls { position: absolute; bottom: .875rem; left: .875rem; display: flex; align-items: center; gap: .5rem; }
@@ -1914,7 +1920,7 @@ pre.chat-md-code-block *::selection,
   .chat-html-feedback svg { width: .875rem; height: .875rem; flex-shrink: 0; }
   @keyframes chat-html-sweep { from { background-position: 120% 0; } to { background-position: -80% 0; } }
   @media (max-width: 480px) { .chat-html-canvas { height: 25rem; --canvas-inset: 1rem; } }
-  @media (pointer: coarse) { .chat-html-orb { width: 2.625rem; height: 2.625rem; } .chat-html-controls { bottom: .75rem; left: .75rem; } }
-  @media (prefers-reduced-motion: reduce) { .chat-html-sheen { animation: none !important; background-position: 50% 0; } .chat-html-orb, .chat-html-sheet { transition: none; } }
-  @media (forced-colors: active) { .chat-html-orb, .chat-html-source, .chat-html-canvas { border-color: CanvasText; } .chat-html-sheen { display: none; } }
+  @media (pointer: coarse) { .chat-html-orb, .chat-media[data-media-kind="image"] .chat-media-action { width: 2.625rem; height: 2.625rem; } .chat-media[data-media-kind="image"] .chat-media-viewport { padding-top: 4rem; } .chat-html-controls { bottom: .75rem; left: .75rem; } }
+  @media (prefers-reduced-motion: reduce) { .chat-html-sheen { animation: none !important; background-position: 50% 0; } .chat-html-orb, .chat-html-sheet, .chat-media[data-media-kind="image"] .chat-media-action { transition: none; } }
+  @media (forced-colors: active) { .chat-html-orb, .chat-html-source, .chat-html-canvas, .chat-media[data-media-kind="image"] .chat-media-action { border-color: CanvasText; } .chat-html-sheen { display: none; } }
 }

package/dist/components/ui/KeyedFor.d.ts

@@ -0,0 +1,9 @@
+import { type Accessor, type JSX } from 'solid-js';
+export interface KeyedForProps<T, K extends string | number> {
+    each: readonly T[] | null | undefined;
+    by: (item: T) => K;
+    children: (item: Accessor<T>, index: Accessor<number>) => JSX.Element;
+    fallback?: JSX.Element;
+}
+/** Retain list owners by semantic identity while observing replacement values. */
+export declare function KeyedFor<T, K extends string | number>(props: KeyedForProps<T, K>): JSX.Element;

package/dist/components/ui/KeyedFor.js

@@ -0,0 +1,32 @@
+import { createComponent as a } from "solid-js/web";
+import { createMemo as s, For as u } from "solid-js";
+function h(r) {
+  const o = s(() => {
+    const e = /* @__PURE__ */ new Map(), t = [];
+    for (const c of r.each ?? []) {
+      const n = r.by(c);
+      if (e.has(n)) throw new Error("KeyedFor requires unique keys");
+      e.set(n, c), t.push(n);
+    }
+    return {
+      values: e,
+      keys: t
+    };
+  });
+  return a(u, {
+    get each() {
+      return o().keys;
+    },
+    get fallback() {
+      return r.fallback;
+    },
+    children: (e, t) => (
+      // Render callbacks receive accessors intentionally; the child owns their reads.
+      // eslint-disable-next-line solid/reactivity
+      r.children(() => o().values.get(e), t)
+    )
+  });
+}
+export {
+  h as KeyedFor
+};

package/dist/components/ui/Stepper.js

@@ -1,8 +1,9 @@
-import { insert as a, createComponent as s, memo as V, effect as b, className as x, mergeProps as A, template as h, setAttribute as z, delegateEvents as D } from "solid-js/web";
-import { splitProps as I, createMemo as $, For as N, Show as v, createSignal as O } from "solid-js";
+import { insert as a, createComponent as s, memo as V, effect as b, className as x, mergeProps as A, template as p, setAttribute as z, delegateEvents as D } from "solid-js/web";
+import { splitProps as I, createMemo as $, Show as v, createSignal as K } from "solid-js";
+import { KeyedFor as N } from "./KeyedFor.js";
 import { cn as m } from "../../utils/cn.js";
-import { Check as T } from "../icons/index.js";
-var U = /* @__PURE__ */ h("<div data-floe-surface-part=step>"), L = /* @__PURE__ */ h("<span>"), q = /* @__PURE__ */ h('<span class="text-muted-foreground/60 font-normal">(Optional)'), B = /* @__PURE__ */ h("<p>"), G = /* @__PURE__ */ h("<div><div><span>"), H = /* @__PURE__ */ h("<div data-floe-surface=inset data-floe-surface-part=progress-track>"), J = /* @__PURE__ */ h("<nav aria-label=Progress>"), K = /* @__PURE__ */ h('<div class="flex items-center w-full">'), Q = /* @__PURE__ */ h("<div class=mt-2>"), R = /* @__PURE__ */ h('<div class="flex flex-col items-center">'), X = /* @__PURE__ */ h('<div class="flex-1 pb-4">'), W = /* @__PURE__ */ h("<div>"), Y = /* @__PURE__ */ h('<div class="flex flex-col h-full"><div class="flex-shrink-0 mb-6"></div><div>');
+import { Check as O } from "../icons/index.js";
+var T = /* @__PURE__ */ p("<div data-floe-surface-part=step>"), L = /* @__PURE__ */ p("<span>"), U = /* @__PURE__ */ p('<span class="text-muted-foreground/60 font-normal">(Optional)'), q = /* @__PURE__ */ p("<p>"), B = /* @__PURE__ */ p("<div><div><span>"), G = /* @__PURE__ */ p("<div data-floe-surface=inset data-floe-surface-part=progress-track>"), H = /* @__PURE__ */ p("<nav aria-label=Progress>"), J = /* @__PURE__ */ p('<div class="flex items-center w-full">'), Q = /* @__PURE__ */ p("<div class=mt-2>"), R = /* @__PURE__ */ p('<div class="flex flex-col items-center">'), X = /* @__PURE__ */ p('<div class="flex-1 pb-4">'), W = /* @__PURE__ */ p("<div>"), Y = /* @__PURE__ */ p('<div class="flex flex-col h-full"><div class="flex-shrink-0 mb-6"></div><div>');
 const F = {
   sm: {
     indicator: "w-6 h-6 text-[10px]",
@@ -33,11 +34,11 @@ const F = {
   }
 };
 function M(t) {
-  const e = () => F[t.size], i = () => t.status === "completed", c = () => t.status === "current", o = () => m("flex items-center justify-center rounded-full transition-all duration-200", "font-medium select-none flex-shrink-0", e().indicator, t.clickable && !t.step.disabled ? "cursor-pointer hover:scale-110" : t.step.disabled ? "cursor-not-allowed opacity-50" : ""), p = () => t.variant === "dots" ? m("w-3 h-3 md:w-4 md:h-4", i() && "bg-primary", c() && "bg-primary ring-4 ring-primary/20", !i() && !c() && "bg-muted") : t.variant === "minimal" ? m("border-2", i() && "border-primary bg-primary text-primary-foreground", c() && "border-primary text-primary bg-transparent", !i() && !c() && "border-muted text-muted-foreground bg-transparent") : m(i() && "bg-primary text-primary-foreground shadow-sm", c() && "bg-primary text-primary-foreground shadow-md ring-4 ring-primary/20", !i() && !c() && "bg-muted text-muted-foreground"), u = () => {
+  const e = () => F[t.size], i = () => t.status === "completed", c = () => t.status === "current", o = () => m("flex items-center justify-center rounded-full transition-all duration-200", "font-medium select-none flex-shrink-0", e().indicator, t.clickable && !t.step.disabled ? "cursor-pointer hover:scale-110" : t.step.disabled ? "cursor-not-allowed opacity-50" : ""), h = () => t.variant === "dots" ? m("w-3 h-3 md:w-4 md:h-4", i() && "bg-primary", c() && "bg-primary ring-4 ring-primary/20", !i() && !c() && "bg-muted") : t.variant === "minimal" ? m("border-2", i() && "border-primary bg-primary text-primary-foreground", c() && "border-primary text-primary bg-transparent", !i() && !c() && "border-muted text-muted-foreground bg-transparent") : m(i() && "bg-primary text-primary-foreground shadow-sm", c() && "bg-primary text-primary-foreground shadow-md ring-4 ring-primary/20", !i() && !c() && "bg-muted text-muted-foreground"), u = () => {
     t.clickable && !t.step.disabled && t.onClick && t.onClick();
   };
   return (() => {
-    var n = U();
+    var n = T();
     return n.$$keydown = (r) => {
       (r.key === "Enter" || r.key === " ") && (r.preventDefault(), u());
     }, n.$$click = u, a(n, s(v, {
@@ -67,7 +68,7 @@ function M(t) {
             });
           },
           get children() {
-            return s(T, {
+            return s(O, {
               get class() {
                 return e().iconSize;
               }
@@ -76,7 +77,7 @@ function M(t) {
         });
       }
     })), b((r) => {
-      var g = c() || i() ? "raised" : "inset", C = c() ? "current" : i() ? "completed" : "pending", k = m(o(), p()), d = t.clickable ? "button" : void 0, l = t.clickable && !t.step.disabled ? 0 : void 0;
+      var g = c() || i() ? "raised" : "inset", C = c() ? "current" : i() ? "completed" : "pending", k = m(o(), h()), d = t.clickable ? "button" : void 0, l = t.clickable && !t.step.disabled ? 0 : void 0;
       return g !== r.e && z(n, "data-floe-surface", r.e = g), C !== r.t && z(n, "data-floe-step-state", r.t = C), k !== r.a && x(n, r.a = k), d !== r.o && z(n, "role", r.o = d), l !== r.i && z(n, "tabindex", r.i = l), r;
     }, {
       e: void 0,
@@ -90,25 +91,25 @@ function M(t) {
 function j(t) {
   const e = () => F[t.size], i = () => t.status === "current", c = () => t.status === "upcoming";
   return (() => {
-    var o = G(), p = o.firstChild, u = p.firstChild;
-    return a(u, () => t.step.label), a(p, s(v, {
+    var o = B(), h = o.firstChild, u = h.firstChild;
+    return a(u, () => t.step.label), a(h, s(v, {
       get when() {
         return t.step.optional;
       },
       get children() {
-        return q();
+        return U();
       }
     }), null), a(o, s(v, {
       get when() {
         return t.step.description;
       },
       get children() {
-        var n = B();
+        var n = q();
         return a(n, () => t.step.description), b(() => x(n, m(e().description, "text-muted-foreground", c() && "opacity-60", t.step.disabled && "opacity-50"))), n;
       }
     }), null), b((n) => {
       var r = m("flex flex-col", e().gap, t.orientation === "horizontal" ? "items-center text-center" : "items-start"), g = m("flex items-center gap-1", e().label, "font-medium transition-colors duration-200", i() && "text-foreground", !i() && "text-muted-foreground", t.step.disabled && "opacity-50");
-      return r !== n.e && x(o, n.e = r), g !== n.t && x(p, n.t = g), n;
+      return r !== n.e && x(o, n.e = r), g !== n.t && x(h, n.t = g), n;
     }, {
       e: void 0,
       t: void 0
@@ -118,12 +119,12 @@ function j(t) {
 function E(t) {
   const e = () => F[t.size];
   return (() => {
-    var i = H();
+    var i = G();
     return b(() => x(i, m("transition-colors duration-300", t.orientation === "horizontal" ? m("flex-1", e().connector) : m(e().connectorVertical, "mx-auto"), t.completed ? "bg-primary" : "bg-muted"))), i;
   })();
 }
 function Z(t) {
-  const [e] = I(t, ["steps", "currentStep", "onStepClick", "variant", "orientation", "size", "showConnector", "allowClickCompleted", "allowClickFuture", "class"]), i = () => e.variant ?? "default", c = () => e.orientation ?? "horizontal", o = () => e.size ?? "md", p = () => e.showConnector ?? !0, u = () => e.allowClickCompleted ?? !0, n = () => e.allowClickFuture ?? !1, r = $(() => typeof e.currentStep == "function" ? e.currentStep() : e.currentStep), g = (d) => {
+  const [e] = I(t, ["steps", "currentStep", "onStepClick", "variant", "orientation", "size", "showConnector", "allowClickCompleted", "allowClickFuture", "class"]), i = () => e.variant ?? "default", c = () => e.orientation ?? "horizontal", o = () => e.size ?? "md", h = () => e.showConnector ?? !0, u = () => e.allowClickCompleted ?? !0, n = () => e.allowClickFuture ?? !1, r = $(() => typeof e.currentStep == "function" ? e.currentStep() : e.currentStep), g = (d) => {
     const l = r();
     return d < l ? "completed" : d === l ? "current" : "upcoming";
   }, C = (d) => {
@@ -134,11 +135,12 @@ function Z(t) {
     C(d) && !l.disabled && e.onStepClick?.(d, l);
   };
   return (() => {
-    var d = J();
+    var d = H();
     return a(d, s(N, {
       get each() {
         return e.steps;
       },
+      by: (l) => l.id,
       children: (l, w) => {
         const S = () => g(w()), P = () => C(w()), _ = () => w() === e.steps.length - 1;
         return (() => {
@@ -149,9 +151,11 @@ function Z(t) {
             },
             get children() {
               return [(() => {
-                var f = K();
+                var f = J();
                 return a(f, s(M, {
-                  step: l,
+                  get step() {
+                    return l();
+                  },
                   get index() {
                     return w();
                   },
@@ -164,13 +168,13 @@ function Z(t) {
                   get size() {
                     return o();
                   },
-                  onClick: () => k(w(), l),
+                  onClick: () => k(w(), l()),
                   get clickable() {
                     return P();
                   }
                 }), null), a(f, s(v, {
                   get when() {
-                    return V(() => !!p())() && !_();
+                    return V(() => !!h())() && !_();
                   },
                   get children() {
                     return s(E, {
@@ -187,7 +191,9 @@ function Z(t) {
               })(), (() => {
                 var f = Q();
                 return a(f, s(j, {
-                  step: l,
+                  get step() {
+                    return l();
+                  },
                   get status() {
                     return S();
                   },
@@ -206,7 +212,9 @@ function Z(t) {
               return [(() => {
                 var f = R();
                 return a(f, s(M, {
-                  step: l,
+                  get step() {
+                    return l();
+                  },
                   get index() {
                     return w();
                   },
@@ -219,13 +227,13 @@ function Z(t) {
                   get size() {
                     return o();
                   },
-                  onClick: () => k(w(), l),
+                  onClick: () => k(w(), l()),
                   get clickable() {
                     return P();
                   }
                 }), null), a(f, s(v, {
                   get when() {
-                    return V(() => !!p())() && !_();
+                    return V(() => !!h())() && !_();
                   },
                   get children() {
                     return s(E, {
@@ -242,7 +250,9 @@ function Z(t) {
               })(), (() => {
                 var f = X();
                 return a(f, s(j, {
-                  step: l,
+                  get step() {
+                    return l();
+                  },
                   get status() {
                     return S();
                   },
@@ -259,18 +269,18 @@ function Z(t) {
     })), b(() => x(d, m("flex", c() === "horizontal" ? "flex-row items-start justify-between" : "flex-col", e.class))), d;
   })();
 }
-function it(t) {
+function ot(t) {
   const [e, i] = I(t, ["steps", "footer", "contentClass", "footerClass"]), c = () => e.steps.map(({
     content: u,
     ...n
-  }) => n), o = $(() => typeof t.currentStep == "function" ? t.currentStep() : t.currentStep), p = () => e.steps[o()]?.content;
+  }) => n), o = $(() => typeof t.currentStep == "function" ? t.currentStep() : t.currentStep), h = () => e.steps[o()]?.content;
   return (() => {
     var u = Y(), n = u.firstChild, r = n.nextSibling;
     return a(n, s(Z, A(i, {
       get steps() {
         return c();
       }
-    }))), a(r, p), a(u, s(v, {
+    }))), a(r, h), a(u, s(v, {
       get when() {
         return e.footer;
       },
@@ -281,14 +291,14 @@ function it(t) {
     }), null), b(() => x(r, m("flex-1 min-h-0", e.contentClass))), u;
   })();
 }
-function ot(t) {
+function lt(t) {
   const {
     totalSteps: e,
     initialStep: i = 0,
     onStepChange: c
-  } = t, [o, p] = O(i), u = (d) => {
+  } = t, [o, h] = K(i), u = (d) => {
     const l = Math.max(0, Math.min(d, e - 1));
-    p(l), c?.(l);
+    h(l), c?.(l);
   }, n = () => {
     o() < e - 1 && u(o() + 1);
   }, r = () => {
@@ -309,6 +319,6 @@ function ot(t) {
 D(["click", "keydown"]);
 export {
   Z as Stepper,
-  it as Wizard,
-  ot as useWizard
+  ot as Wizard,
+  lt as useWizard
 };

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

@@ -46,3 +46,4 @@ export { LinearProgress, CircularProgress, SegmentedProgress, StepsProgress, typ
 export { SurfaceAnchoredLayer, type SurfaceAnchoredLayerProps } from './SurfaceAnchoredLayer';
 export { PersistentHorizontalScrollbar, type PersistentHorizontalScrollbarProps } from './PersistentHorizontalScrollbar';
 export { SettingsLayout, SettingsNavigation, SettingsSection, SettingsList, SettingRow, type SettingsNavigationItem, type SettingsNavigationGroup, type SettingsNavigationProps, type SettingsSectionProps, type SettingRowProps, } from './Settings';
+export { KeyedFor, type KeyedForProps } from './KeyedFor';