@floegence/floe-webapp-core 0.86.58 → 0.86.62

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (103) hide show
  1. package/dist/components/chat/blocks/BlockRenderer.js +1 -1
  2. package/dist/components/chat/blocks/CodeDiffBlock.js +56 -56
  3. package/dist/components/chat/blocks/ImageBlock.js +1 -1
  4. package/dist/components/chat/blocks/ToolCallBlock.js +57 -57
  5. package/dist/components/chat/status/ConnectionStatus.js +10 -10
  6. package/dist/components/deck/DeckCell.js +25 -25
  7. package/dist/components/deck/DeckContextMenu.js +20 -20
  8. package/dist/components/deck/DeckGrid.js +1 -1
  9. package/dist/components/deck/DeckTopBar.js +42 -42
  10. package/dist/components/deck/DropZonePreview.js +6 -6
  11. package/dist/components/deck/LayoutSelector.js +53 -53
  12. package/dist/components/deck/WidgetFrame.js +28 -28
  13. package/dist/components/deck/WidgetPalette.js +31 -31
  14. package/dist/components/deck/WidgetTypeSwitcher.js +31 -31
  15. package/dist/components/file-browser/Breadcrumb.js +27 -27
  16. package/dist/components/file-browser/DirectoryTree.js +15 -15
  17. package/dist/components/file-browser/DragPreview.js +58 -58
  18. package/dist/components/file-browser/FileBrowser.js +17 -17
  19. package/dist/components/file-browser/FileBrowserStatusBar.js +18 -18
  20. package/dist/components/file-browser/FileBrowserToolbar.js +27 -27
  21. package/dist/components/file-browser/FileContextMenu.js +47 -47
  22. package/dist/components/file-browser/FileGridView.js +53 -51
  23. package/dist/components/file-browser/FileItemDecorations.js +30 -27
  24. package/dist/components/file-browser/FileListView.js +114 -114
  25. package/dist/components/icons/index.js +1357 -1357
  26. package/dist/components/launchpad/Launchpad.js +14 -14
  27. package/dist/components/launchpad/LaunchpadGrid.js +7 -7
  28. package/dist/components/launchpad/LaunchpadItem.js +11 -11
  29. package/dist/components/launchpad/LaunchpadPagination.js +16 -16
  30. package/dist/components/launchpad/LaunchpadSearch.js +9 -9
  31. package/dist/components/layout/ActivityBar.js +52 -55
  32. package/dist/components/layout/BottomBar.js +17 -17
  33. package/dist/components/layout/MobileNavigationPanel.js +36 -36
  34. package/dist/components/layout/MobileTabBar.js +39 -39
  35. package/dist/components/layout/Panel.js +16 -16
  36. package/dist/components/layout/ResizeHandle.js +19 -19
  37. package/dist/components/layout/Shell.js +50 -50
  38. package/dist/components/layout/Sidebar.js +37 -36
  39. package/dist/components/layout/SidebarPane.js +19 -19
  40. package/dist/components/layout/TopBar.js +16 -16
  41. package/dist/components/layout/TopBarIconButton.js +15 -15
  42. package/dist/components/loading/LoadingOverlay.js +9 -9
  43. package/dist/components/loading/Skeleton.js +11 -11
  44. package/dist/components/ui/Button.js +36 -36
  45. package/dist/components/ui/Card.d.ts +11 -62
  46. package/dist/components/ui/Card.js +64 -237
  47. package/dist/components/ui/Checkbox.js +79 -79
  48. package/dist/components/ui/CommandPalette.js +56 -55
  49. package/dist/components/ui/Dialog.js +91 -93
  50. package/dist/components/ui/DirectoryInput.js +22 -22
  51. package/dist/components/ui/DirectoryPicker.js +8 -8
  52. package/dist/components/ui/Dropdown.js +89 -87
  53. package/dist/components/ui/FeedbackIndicator.js +57 -57
  54. package/dist/components/ui/FileOpenPicker.js +37 -37
  55. package/dist/components/ui/FileSavePicker.js +41 -41
  56. package/dist/components/ui/FloatingWindow.js +266 -261
  57. package/dist/components/ui/Form.js +76 -76
  58. package/dist/components/ui/HighlightBlock.js +14 -14
  59. package/dist/components/ui/Input.js +106 -109
  60. package/dist/components/ui/Pagination.js +86 -86
  61. package/dist/components/ui/Popover.d.ts +33 -0
  62. package/dist/components/ui/Popover.js +133 -0
  63. package/dist/components/ui/ProcessingIndicator.js +344 -345
  64. package/dist/components/ui/Progress.js +94 -97
  65. package/dist/components/ui/QuoteBlock.js +25 -25
  66. package/dist/components/ui/Radio.js +91 -91
  67. package/dist/components/ui/SegmentedControl.js +24 -24
  68. package/dist/components/ui/Stepper.js +68 -60
  69. package/dist/components/ui/Switch.js +25 -25
  70. package/dist/components/ui/Tabs.js +99 -87
  71. package/dist/components/ui/Tag.js +12 -9
  72. package/dist/components/ui/Tooltip.js +30 -30
  73. package/dist/components/ui/floatingPresence.d.ts +7 -0
  74. package/dist/components/ui/floatingPresence.js +80 -39
  75. package/dist/components/ui/index.d.ts +2 -1
  76. package/dist/components/ui/picker/DirectoryFavorites.js +27 -27
  77. package/dist/components/ui/picker/PickerBase.js +107 -107
  78. package/dist/context/NotificationContext.js +4 -4
  79. package/dist/context/ThemeContext.js +71 -70
  80. package/dist/floe.css +205 -43
  81. package/dist/full.js +650 -652
  82. package/dist/language.css +320 -0
  83. package/dist/primitives.css +23 -17
  84. package/dist/standalone.css +1 -0
  85. package/dist/styles/themes/classicSemanticTokens.d.ts +122 -122
  86. package/dist/styles/themes/classicSemanticTokens.js +140 -138
  87. package/dist/styles/themes/index.d.ts +3 -1
  88. package/dist/styles/themes/index.js +10 -10
  89. package/dist/styles/themes/presets.d.ts +2 -2
  90. package/dist/styles/themes/presets.js +34 -34
  91. package/dist/styles/tokens.d.ts +152 -68
  92. package/dist/styles/tokens.js +87 -49
  93. package/dist/styles.css +1 -1
  94. package/dist/surface.css +161 -116
  95. package/dist/themes/dark.css +64 -64
  96. package/dist/themes/light.css +64 -64
  97. package/dist/ui.css +171 -255
  98. package/dist/ui.js +176 -178
  99. package/dist/utils/hotInteraction.d.ts +7 -0
  100. package/dist/utils/hotInteraction.js +12 -12
  101. package/dist/widgets/TerminalWidget.js +28 -28
  102. package/dist/workbench-composition.css +15 -15
  103. package/package.json +1 -1
@@ -42,24 +42,24 @@ var de = /* @__PURE__ */ k('<div class="pt-8 pb-4 px-8">'), ue = /* @__PURE__ */
42
42
  .launchpad-search {
43
43
  animation: launchpad-search-enter 0.4s ease-out;
44
44
  }
45
- </style><div class="flex-1 min-h-0 overflow-hidden"></div><div class="absolute bottom-4 right-4 text-muted-foreground/60 text-xs hidden md:block"><kbd class="px-1.5 py-0.5 rounded border border-border/50 bg-card/80 text-foreground/80 font-mono mr-1">ESC</kbd> to close<span class=mx-2>|</span><kbd class="px-1.5 py-0.5 rounded border border-border/50 bg-card/80 text-foreground/80 font-mono mr-1">\\u2190</kbd><kbd class="px-1.5 py-0.5 rounded border border-border/50 bg-card/80 text-foreground/80 font-mono">→</kbd> to navigate`);
45
+ </style><div class="flex-1 min-h-0 overflow-hidden"></div><div class="absolute bottom-4 right-4 text-[var(--floe-ink-quiet)] text-xs hidden md:block"><kbd class="px-1.5 py-0.5 rounded-xs border border-[var(--floe-line)] bg-card/80 text-foreground/80 font-mono mr-1">ESC</kbd> to close<span class=mx-2>|</span><kbd class="px-1.5 py-0.5 rounded-xs border border-[var(--floe-line)] bg-card/80 text-foreground/80 font-mono mr-1">←</kbd><kbd class="px-1.5 py-0.5 rounded-xs border border-[var(--floe-line)] bg-card/80 text-foreground/80 font-mono">→</kbd> to navigate`);
46
46
  function we(r) {
47
47
  let m;
48
- const [b, X] = d(""), [Q, w] = d(""), [h, C] = d(0), [R, L] = d(!0), [N, P] = d(null);
48
+ const [p, X] = d(""), [Q, w] = d(""), [h, C] = d(0), [R, L] = d(!0), [q, P] = d(null);
49
49
  let o = null;
50
- const p = () => r.itemsPerPage ?? 20, W = () => r.columns ?? 5, j = () => r.showSearch !== !1, S = (() => {
50
+ const b = () => r.itemsPerPage ?? 20, N = () => r.columns ?? 5, W = () => r.showSearch !== !1, S = (() => {
51
51
  try {
52
52
  return ie();
53
53
  } catch {
54
54
  return null;
55
55
  }
56
- })(), q = () => S ? S.active() : !0, $ = u(() => {
56
+ })(), j = () => S ? S.active() : !0, $ = u(() => {
57
57
  const e = r.items ?? [], t = r.additionalItems ?? [];
58
58
  return [...e, ...t];
59
59
  });
60
60
  let v = 0;
61
61
  Y(() => {
62
- const e = b().trim();
62
+ const e = p().trim();
63
63
  v += 1;
64
64
  const t = v;
65
65
  if (!e) {
@@ -77,9 +77,9 @@ function we(r) {
77
77
  }))), A = u(() => {
78
78
  const e = Q().toLowerCase().trim();
79
79
  return e ? z().filter((t) => t.nameLower.includes(e) || t.descLower.includes(e)).map((t) => t.item) : $();
80
- }), y = u(() => Math.max(1, Math.ceil(A().length / p()))), B = u(() => {
81
- const e = h() * p();
82
- return A().slice(e, e + p());
80
+ }), y = u(() => Math.max(1, Math.ceil(A().length / b()))), B = u(() => {
81
+ const e = h() * b();
82
+ return A().slice(e, e + b());
83
83
  }), D = (e) => {
84
84
  X(e), C(0);
85
85
  }, x = (e) => {
@@ -108,7 +108,7 @@ function we(r) {
108
108
  y: t.clientY
109
109
  });
110
110
  }, H = (e) => {
111
- const t = N();
111
+ const t = q();
112
112
  if (!t) return;
113
113
  const a = e.changedTouches[0];
114
114
  if (!a) return;
@@ -118,7 +118,7 @@ function we(r) {
118
118
  e.target.closest('button, input, a, [role="button"]') || r.onClose?.();
119
119
  };
120
120
  Y(() => {
121
- q() && (document.addEventListener("keydown", I), E(() => {
121
+ j() && (document.addEventListener("keydown", I), E(() => {
122
122
  document.removeEventListener("keydown", I);
123
123
  }));
124
124
  }), re(() => {
@@ -149,13 +149,13 @@ function we(r) {
149
149
  var c = m;
150
150
  return typeof c == "function" ? ee(c, e) : m = e, i(e, l(_, {
151
151
  get when() {
152
- return j();
152
+ return W();
153
153
  },
154
154
  get children() {
155
155
  var n = de();
156
156
  return i(n, l(ae, {
157
157
  get value() {
158
- return b();
158
+ return p();
159
159
  },
160
160
  onChange: D,
161
161
  placeholder: "Search apps..."
@@ -169,14 +169,14 @@ function we(r) {
169
169
  return r.onItemClick;
170
170
  },
171
171
  get columns() {
172
- return W();
172
+ return N();
173
173
  },
174
174
  get animating() {
175
175
  return R();
176
176
  }
177
177
  })), i(e, l(_, {
178
178
  get when() {
179
- return F(() => y() > 1)() && !b();
179
+ return F(() => y() > 1)() && !p();
180
180
  },
181
181
  get children() {
182
182
  var n = ue();
@@ -1,12 +1,12 @@
1
- import { insert as o, createComponent as a, effect as d, setStyleProperty as u, template as i } from "solid-js/web";
2
- import { Show as s, For as f } from "solid-js";
1
+ import { insert as o, createComponent as a, effect as s, setStyleProperty as u, template as i } from "solid-js/web";
2
+ import { Show as d, For as f } from "solid-js";
3
3
  import { LaunchpadItem as g } from "./LaunchpadItem.js";
4
- var h = /* @__PURE__ */ i('<div class="grid gap-4 place-items-center">'), v = /* @__PURE__ */ i('<div class="launchpad-grid w-full h-full flex items-center justify-center p-8">'), p = /* @__PURE__ */ i('<div class="text-muted-foreground text-xs">No apps found');
4
+ var v = /* @__PURE__ */ i('<div class="grid gap-4 place-items-center">'), h = /* @__PURE__ */ i('<div class="launchpad-grid w-full h-full flex items-center justify-center p-8">'), p = /* @__PURE__ */ i('<div class="text-[var(--floe-ink-soft)] text-xs">No apps found');
5
5
  function $(t) {
6
6
  const l = () => t.columns ?? 5;
7
7
  return (() => {
8
- var m = v();
9
- return o(m, a(s, {
8
+ var m = h();
9
+ return o(m, a(d, {
10
10
  get when() {
11
11
  return t.items.length > 0;
12
12
  },
@@ -14,7 +14,7 @@ function $(t) {
14
14
  return p();
15
15
  },
16
16
  get children() {
17
- var r = h();
17
+ var r = v();
18
18
  return o(r, a(f, {
19
19
  get each() {
20
20
  return t.items;
@@ -34,7 +34,7 @@ function $(t) {
34
34
  };
35
35
  }
36
36
  })
37
- })), d((e) => {
37
+ })), s((e) => {
38
38
  var n = `repeat(${l()}, minmax(0, 1fr))`, c = `${l() * 120}px`;
39
39
  return n !== e.e && u(r, "grid-template-columns", e.e = n), c !== e.t && u(r, "max-width", e.t = c), e;
40
40
  }, {
@@ -1,22 +1,22 @@
1
- import { insert as l, createComponent as x, effect as g, style as f, setAttribute as b, setStyleProperty as d, template as y, delegateEvents as h } from "solid-js/web";
2
- var k = /* @__PURE__ */ y('<button type=button class="launchpad-item group flex flex-col items-center gap-2 rounded-2xl p-3 cursor-pointer bg-transparent select-none outline-none transition-[transform,background-color] duration-200 ease-out hover:scale-[1.02] hover:bg-card/20 focus-visible:bg-card/30 active:scale-95"tabindex=0><div class="w-14 h-14 rounded-2xl flex items-center justify-center shadow-lg transition-transform duration-200 group-hover:scale-105"style="box-shadow:0 16px 32px -20px color-mix(in srgb, var(--foreground) 55%, transparent)"></div><span class="text-xs text-foreground/80 font-medium truncate max-w-[80px] text-center">');
1
+ import { insert as c, createComponent as f, effect as g, style as x, setAttribute as y, setStyleProperty as d, template as b, delegateEvents as h } from "solid-js/web";
2
+ var k = /* @__PURE__ */ b('<button type=button class="launchpad-item group flex flex-col items-center gap-2 rounded-panel p-3 cursor-pointer bg-transparent select-none outline-none transition-[transform,background-color] duration-[var(--floe-duration-base)] ease-out hover:-translate-y-[var(--floe-hover-lift)] hover:bg-card/20 focus-visible:bg-card/30 active:scale-[var(--floe-press-scale)]"tabindex=0><div class="w-14 h-14 rounded-panel flex items-center justify-center shadow-[var(--floe-elevation-float)] transition-transform duration-[var(--floe-duration-base)] group-hover:-translate-y-[var(--floe-hover-lift)]"></div><span class="text-xs text-foreground/80 font-medium truncate max-w-[80px] text-center">');
3
3
  function C(e) {
4
- const s = () => e.item.color ?? "linear-gradient(135deg, color-mix(in srgb, var(--primary) 78%, var(--info) 22%), color-mix(in srgb, var(--primary) 58%, var(--accent) 42%))", i = () => {
4
+ const s = () => e.item.color ?? "linear-gradient(135deg, color-mix(in srgb, var(--primary) 78%, var(--info) 22%), color-mix(in srgb, var(--primary) 58%, var(--accent) 42%))", a = () => {
5
5
  e.item.onClick?.(), e.onClick?.(e.item);
6
- }, m = (t) => {
7
- (t.key === "Enter" || t.key === " ") && (t.preventDefault(), i());
6
+ }, v = (t) => {
7
+ (t.key === "Enter" || t.key === " ") && (t.preventDefault(), a());
8
8
  };
9
9
  return (() => {
10
- var t = k(), r = t.firstChild, u = r.nextSibling;
11
- return t.$$keydown = m, t.$$click = i, l(r, x(e.item.icon, {
10
+ var t = k(), r = t.firstChild, m = r.nextSibling;
11
+ return t.$$keydown = v, t.$$click = a, c(r, f(e.item.icon, {
12
12
  class: "w-7 h-7"
13
- })), l(u, () => e.item.name), g((n) => {
14
- var v = {
13
+ })), c(m, () => e.item.name), g((n) => {
14
+ var u = {
15
15
  "--item-index": e.index,
16
16
  "animation-delay": `${e.index * 30}ms`,
17
17
  ...e.style
18
- }, o = e.item.description ?? e.item.name, a = s(), c = e.item.color ? "white" : "var(--primary-foreground)";
19
- return n.e = f(t, v, n.e), o !== n.t && b(t, "title", n.t = o), a !== n.a && d(r, "background", n.a = a), c !== n.o && d(r, "color", n.o = c), n;
18
+ }, i = e.item.description ?? e.item.name, o = s(), l = e.item.color ? "white" : "var(--primary-foreground)";
19
+ return n.e = x(t, u, n.e), i !== n.t && y(t, "title", n.t = i), o !== n.a && d(r, "background", n.a = o), l !== n.o && d(r, "color", n.o = l), n;
20
20
  }, {
21
21
  e: void 0,
22
22
  t: void 0,
@@ -1,32 +1,32 @@
1
- import { insert as c, createComponent as g, setAttribute as o, effect as s, classList as d, template as l, delegateEvents as m } from "solid-js/web";
2
- import { For as v } from "solid-js";
3
- var f = /* @__PURE__ */ l('<div class="launchpad-pagination flex items-center justify-center gap-2">'), b = /* @__PURE__ */ l('<button type=button class="w-2 h-2 rounded-full cursor-pointer transition-all duration-300 outline-none focus-visible:ring-2">');
1
+ import { insert as u, createComponent as s, setAttribute as i, effect as g, classList as v, template as l, delegateEvents as d } from "solid-js/web";
2
+ import { For as f } from "solid-js";
3
+ var m = /* @__PURE__ */ l('<div class="launchpad-pagination flex items-center justify-center gap-2">'), b = /* @__PURE__ */ l('<button type=button class="w-2 h-2 rounded-full cursor-pointer transition-[background-color,color,transform] duration-[var(--floe-duration-slow)] outline-none focus-visible:ring-2">');
4
4
  function $(r) {
5
5
  return (() => {
6
- var a = f();
7
- return c(a, g(v, {
6
+ var a = m();
7
+ return u(a, s(f, {
8
8
  get each() {
9
9
  return Array.from({
10
10
  length: r.totalPages
11
- }, (t, e) => e);
11
+ }, (e, t) => t);
12
12
  },
13
- children: (t) => (() => {
14
- var e = b();
15
- return e.$$click = () => r.onPageChange(t), o(e, "aria-label", `Go to page ${t + 1}`), s((n) => {
16
- var u = {
17
- "bg-primary scale-125": r.currentPage === t,
18
- "bg-muted-foreground/30": r.currentPage !== t
19
- }, i = r.currentPage === t ? "page" : void 0;
20
- return n.e = d(e, u, n.e), i !== n.t && o(e, "aria-current", n.t = i), n;
13
+ children: (e) => (() => {
14
+ var t = b();
15
+ return t.$$click = () => r.onPageChange(e), i(t, "aria-label", `Go to page ${e + 1}`), g((n) => {
16
+ var c = {
17
+ "bg-primary scale-125": r.currentPage === e,
18
+ "bg-[var(--floe-ink-ghost)]": r.currentPage !== e
19
+ }, o = r.currentPage === e ? "page" : void 0;
20
+ return n.e = v(t, c, n.e), o !== n.t && i(t, "aria-current", n.t = o), n;
21
21
  }, {
22
22
  e: void 0,
23
23
  t: void 0
24
- }), e;
24
+ }), t;
25
25
  })()
26
26
  })), a;
27
27
  })();
28
28
  }
29
- m(["click"]);
29
+ d(["click"]);
30
30
  export {
31
31
  $ as LaunchpadPagination
32
32
  };
@@ -1,15 +1,15 @@
1
- import { insert as n, createComponent as u, effect as l, setAttribute as d, template as c, delegateEvents as i } from "solid-js/web";
1
+ import { insert as n, createComponent as i, effect as l, setAttribute as d, template as u, delegateEvents as c } from "solid-js/web";
2
2
  import { Search as s } from "../icons/index.js";
3
- var h = /* @__PURE__ */ c('<div class="launchpad-search w-full max-w-md mx-auto"><div class=relative><input type=text class="w-full h-10 pl-10 pr-4 rounded-lg bg-card/80 backdrop-blur-sm border border-border text-foreground placeholder:text-muted-foreground/60 outline-none transition-all duration-200 shadow-sm">');
4
- function f(t) {
3
+ var f = /* @__PURE__ */ u('<div class="launchpad-search w-full max-w-md mx-auto"><div class=relative><input type=text class="w-full h-10 pl-10 pr-4 rounded-control bg-card/80 backdrop-blur-sm border border-[var(--floe-line)] text-foreground placeholder:text-[var(--floe-ink-quiet)] outline-none transition-[border-color,box-shadow,background-color] duration-[var(--floe-duration-base)] shadow-[var(--floe-elevation-raised)]">');
4
+ function v(r) {
5
5
  return (() => {
6
- var r = h(), a = r.firstChild, e = a.firstChild;
7
- return n(a, u(s, {
8
- class: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground"
9
- }), e), e.$$input = (o) => t.onChange(o.currentTarget.value), l(() => d(e, "placeholder", t.placeholder ?? "Search")), l(() => e.value = t.value), r;
6
+ var t = f(), a = t.firstChild, e = a.firstChild;
7
+ return n(a, i(s, {
8
+ class: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--floe-ink-soft)]"
9
+ }), e), e.$$input = (o) => r.onChange(o.currentTarget.value), l(() => d(e, "placeholder", r.placeholder ?? "Search")), l(() => e.value = r.value), t;
10
10
  })();
11
11
  }
12
- i(["input"]);
12
+ c(["input"]);
13
13
  export {
14
- f as LaunchpadSearch
14
+ v as LaunchpadSearch
15
15
  };
@@ -1,71 +1,71 @@
1
- import { insert as l, createComponent as o, effect as g, className as x, setAttribute as u, template as v, use as $, Dynamic as B, memo as D, delegateEvents as E } from "solid-js/web";
2
- import { createMemo as s, For as I, Show as h, onMount as R, onCleanup as S } from "solid-js";
3
- import { cn as y } from "../../utils/cn.js";
1
+ import { insert as v, createComponent as o, effect as x, className as s, setAttribute as u, template as h, use as E, Dynamic as R, memo as j, delegateEvents as q } from "solid-js/web";
2
+ import { createMemo as b, For as B, Show as D, onMount as P, onCleanup as T } from "solid-js";
3
+ import { cn as d } from "../../utils/cn.js";
4
4
  import { deferNonBlocking as _ } from "../../utils/defer.js";
5
- import { Tooltip as j } from "../ui/Tooltip.js";
6
- import { resolveActivityBarClick as P } from "./activityBarBehavior.js";
7
- import { isBarItemContextMenuKey as T, keyboardBarItemContextMenuRequest as q } from "./barItemContextMenu.js";
8
- var K = /* @__PURE__ */ v('<div class="flex flex-col">'), N = /* @__PURE__ */ v('<nav data-floe-shell-slot=activity-bar style=border-right-color:var(--activity-bar-border)><div class="flex flex-col">'), X = /* @__PURE__ */ v('<div class="absolute left-0 top-0 w-1 h-full bg-primary rounded-r">'), Y = /* @__PURE__ */ v("<span>"), F = /* @__PURE__ */ v("<button type=button>");
9
- function Q(t) {
10
- const a = s(() => t.activeId), c = s(() => t.collapsed ?? !1), f = s(() => t.onActiveChange), b = s(() => t.onCollapsedChange), m = (e) => {
5
+ import { Tooltip as K } from "../ui/Tooltip.js";
6
+ import { resolveActivityBarClick as N } from "./activityBarBehavior.js";
7
+ import { isBarItemContextMenuKey as X, keyboardBarItemContextMenuRequest as Y } from "./barItemContextMenu.js";
8
+ var F = /* @__PURE__ */ h('<div class="flex flex-col">'), H = /* @__PURE__ */ h('<nav data-floe-shell-slot=activity-bar style=border-right-color:var(--activity-bar-border)><div class="flex flex-col">'), L = /* @__PURE__ */ h("<span>"), V = /* @__PURE__ */ h("<button type=button data-floe-interactive=press><span aria-hidden=true></span><span aria-hidden=true>");
9
+ function Z(t) {
10
+ const l = b(() => t.activeId), c = b(() => t.collapsed ?? !1), f = b(() => t.onActiveChange), y = b(() => t.onCollapsedChange), m = (e) => {
11
11
  if (e.onClick) {
12
12
  _(() => e.onClick());
13
13
  return;
14
14
  }
15
- const i = P({
15
+ const a = N({
16
16
  clickedId: e.id,
17
- activeId: a(),
17
+ activeId: l(),
18
18
  collapsed: c(),
19
19
  behavior: e.collapseBehavior
20
20
  });
21
- i.nextActiveId !== a() && (typeof i.openSidebar == "boolean" ? f()(i.nextActiveId, {
22
- openSidebar: i.openSidebar
23
- }) : f()(i.nextActiveId)), typeof i.nextCollapsed == "boolean" && b()?.(i.nextCollapsed);
21
+ a.nextActiveId !== l() && (typeof a.openSidebar == "boolean" ? f()(a.nextActiveId, {
22
+ openSidebar: a.openSidebar
23
+ }) : f()(a.nextActiveId)), typeof a.nextCollapsed == "boolean" && y()?.(a.nextCollapsed);
24
24
  };
25
25
  return (() => {
26
- var e = N(), i = e.firstChild;
27
- return l(i, o(I, {
26
+ var e = H(), a = e.firstChild;
27
+ return v(a, o(B, {
28
28
  get each() {
29
29
  return t.items;
30
30
  },
31
- children: (n) => o(M, {
31
+ children: (n) => o(S, {
32
32
  item: n,
33
33
  get isActive() {
34
- return a() === n.id;
34
+ return l() === n.id;
35
35
  },
36
36
  onClick: () => m(n)
37
37
  })
38
- })), l(e, o(h, {
38
+ })), v(e, o(D, {
39
39
  get when() {
40
40
  return t.bottomItems?.length;
41
41
  },
42
42
  get children() {
43
- var n = K();
44
- return l(n, o(I, {
43
+ var n = F();
44
+ return v(n, o(B, {
45
45
  get each() {
46
46
  return t.bottomItems;
47
47
  },
48
- children: (r) => o(M, {
48
+ children: (r) => o(S, {
49
49
  item: r,
50
50
  isActive: !1,
51
51
  onClick: () => m(r)
52
52
  })
53
53
  })), n;
54
54
  }
55
- }), null), g((n) => {
56
- var r = y("w-10 md:w-12 flex flex-col justify-between shrink-0 min-h-0", "bg-activity-bar border-r border-border", t.class), d = t.ariaLabel;
57
- return r !== n.e && x(e, n.e = r), d !== n.t && u(e, "aria-label", n.t = d), n;
55
+ }), null), x((n) => {
56
+ var r = d("w-10 md:w-12 flex flex-col justify-between shrink-0 min-h-0", "bg-activity-bar border-r border-[var(--floe-line-quiet)]", t.class), i = t.ariaLabel;
57
+ return r !== n.e && s(e, n.e = r), i !== n.t && u(e, "aria-label", n.t = i), n;
58
58
  }, {
59
59
  e: void 0,
60
60
  t: void 0
61
61
  }), e;
62
62
  })();
63
63
  }
64
- function M(t) {
65
- let a;
64
+ function S(t) {
65
+ let l;
66
66
  const c = () => typeof t.item.badge == "function" ? t.item.badge() : t.item.badge, f = () => typeof t.item.ariaExpanded == "function" ? t.item.ariaExpanded() : t.item.ariaExpanded;
67
- R(() => t.item.buttonRef?.(a ?? null)), S(() => t.item.buttonRef?.(null));
68
- const b = (e) => {
67
+ P(() => t.item.buttonRef?.(l ?? null)), T(() => t.item.buttonRef?.(null));
68
+ const y = (e) => {
69
69
  t.item.onContextMenu && (e.preventDefault(), e.stopPropagation(), t.item.onContextMenu({
70
70
  trigger: e.currentTarget,
71
71
  clientX: e.clientX,
@@ -73,56 +73,53 @@ function M(t) {
73
73
  source: "pointer"
74
74
  }));
75
75
  }, m = (e) => {
76
- !t.item.onContextMenu || !T(e) || (e.preventDefault(), e.stopPropagation(), t.item.onContextMenu(q(e.currentTarget)));
76
+ !t.item.onContextMenu || !X(e) || (e.preventDefault(), e.stopPropagation(), t.item.onContextMenu(Y(e.currentTarget)));
77
77
  };
78
- return o(j, {
78
+ return o(K, {
79
79
  get content() {
80
80
  return t.item.label;
81
81
  },
82
82
  placement: "right",
83
83
  delay: 0,
84
84
  get children() {
85
- var e = F();
86
- e.$$keydown = m, e.$$contextmenu = b, e.$$click = () => t.onClick();
87
- var i = a;
88
- return typeof i == "function" ? $(i, e) : a = e, l(e, o(h, {
89
- get when() {
90
- return t.isActive;
91
- },
92
- get children() {
93
- return X();
94
- }
95
- }), null), l(e, o(B, {
85
+ var e = V(), a = e.firstChild, n = a.nextSibling;
86
+ e.$$keydown = m, e.$$contextmenu = y, e.$$click = () => t.onClick();
87
+ var r = l;
88
+ return typeof r == "function" ? E(r, e) : l = e, v(e, o(R, {
96
89
  get component() {
97
90
  return t.item.icon;
98
91
  },
99
- class: "w-5 h-5"
100
- }), null), l(e, o(h, {
92
+ get class() {
93
+ return d("relative w-5 h-5 transition-[color,transform] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", t.isActive ? "text-activity-bar-foreground-active" : "group-hover/activity-item:text-activity-bar-foreground-active group-hover/activity-item:-translate-y-px");
94
+ }
95
+ }), null), v(e, o(D, {
101
96
  get when() {
102
97
  return c();
103
98
  },
104
99
  get children() {
105
- var n = Y();
106
- return l(n, (() => {
107
- var r = D(() => typeof c() == "number" && c() > 99);
108
- return () => r() ? "99+" : c();
109
- })()), g(() => x(n, y("absolute top-0.5 right-0.5 min-w-3.5 h-3.5 px-1", "flex items-center justify-center", "text-[9px] font-medium rounded-full", "bg-activity-bar-badge text-activity-bar-badge-foreground"))), n;
100
+ var i = L();
101
+ return v(i, (() => {
102
+ var g = j(() => typeof c() == "number" && c() > 99);
103
+ return () => g() ? "99+" : c();
104
+ })()), x(() => s(i, d("absolute top-0.5 right-0.5 min-w-3.5 h-3.5 px-1", "flex items-center justify-center", "text-[length:var(--floe-type-caption)] font-medium rounded-full", "bg-activity-bar-badge text-activity-bar-badge-foreground"))), i;
110
105
  }
111
- }), null), g((n) => {
112
- var r = y("relative w-full aspect-square flex items-center justify-center cursor-pointer", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset", t.isActive ? "text-activity-bar-foreground-active bg-accent" : "text-activity-bar-foreground transition-[color,background-color] duration-100 hover:text-activity-bar-foreground-active hover:bg-accent/50"), d = t.item.label, C = t.isActive, k = f(), w = t.item.ariaControls, A = t.item.ariaHasPopup ?? (t.item.onContextMenu ? "menu" : void 0);
113
- return r !== n.e && x(e, n.e = r), d !== n.t && u(e, "aria-label", n.t = d), C !== n.a && u(e, "aria-pressed", n.a = C), k !== n.o && u(e, "aria-expanded", n.o = k), w !== n.i && u(e, "aria-controls", n.i = w), A !== n.n && u(e, "aria-haspopup", n.n = A), n;
106
+ }), null), x((i) => {
107
+ var g = d("group/activity-item relative w-full aspect-square flex items-center justify-center cursor-pointer", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset", "text-activity-bar-foreground", t.isActive && "text-activity-bar-foreground-active"), C = t.item.label, k = t.isActive, A = f(), w = t.item.ariaControls, I = t.item.ariaHasPopup ?? (t.item.onContextMenu ? "menu" : void 0), M = d("absolute inset-1 rounded-md", "transition-colors duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", t.isActive ? "bg-[var(--floe-state-selected)]" : "bg-transparent group-hover/activity-item:bg-[var(--floe-state-hover)]"), $ = d("absolute left-0 top-1/2 -translate-y-1/2 w-[2px] rounded-full", "transition-[height,background-color] duration-[var(--floe-duration-base)] ease-[var(--floe-ease-out)]", t.isActive ? "h-4 bg-[var(--activity-bar-foreground-active)]" : "h-1.5 bg-transparent group-hover/activity-item:h-2.5 group-hover/activity-item:bg-[var(--floe-line-strong)]");
108
+ return g !== i.e && s(e, i.e = g), C !== i.t && u(e, "aria-label", i.t = C), k !== i.a && u(e, "aria-pressed", i.a = k), A !== i.o && u(e, "aria-expanded", i.o = A), w !== i.i && u(e, "aria-controls", i.i = w), I !== i.n && u(e, "aria-haspopup", i.n = I), M !== i.s && s(a, i.s = M), $ !== i.h && s(n, i.h = $), i;
114
109
  }, {
115
110
  e: void 0,
116
111
  t: void 0,
117
112
  a: void 0,
118
113
  o: void 0,
119
114
  i: void 0,
120
- n: void 0
115
+ n: void 0,
116
+ s: void 0,
117
+ h: void 0
121
118
  }), e;
122
119
  }
123
120
  });
124
121
  }
125
- E(["click", "contextmenu", "keydown"]);
122
+ q(["click", "contextmenu", "keydown"]);
126
123
  export {
127
- Q as ActivityBar
124
+ Z as ActivityBar
128
125
  };
@@ -1,24 +1,24 @@
1
- import { insert as n, effect as a, className as u, createComponent as c, template as i, delegateEvents as b } from "solid-js/web";
2
- import { Show as s } from "solid-js";
3
- import { cn as m } from "../../utils/cn.js";
4
- import { useResolvedFloeConfig as f } from "../../context/FloeConfigContext.js";
5
- var h = /* @__PURE__ */ i("<footer data-floe-shell-slot=bottom-bar style=background-color:var(--activity-bar);border-top-color:var(--bottom-bar-border)>"), g = /* @__PURE__ */ i('<span class="w-2.5 h-2.5">'), v = /* @__PURE__ */ i("<button type=button>"), d = /* @__PURE__ */ i("<span>");
1
+ import { insert as n, effect as c, className as i, createComponent as a, template as s, delegateEvents as m } from "solid-js/web";
2
+ import { Show as u } from "solid-js";
3
+ import { cn as f } from "../../utils/cn.js";
4
+ import { useResolvedFloeConfig as b } from "../../context/FloeConfigContext.js";
5
+ var h = /* @__PURE__ */ s("<footer data-floe-shell-slot=bottom-bar style=background-color:var(--activity-bar);border-top-color:var(--bottom-bar-border)>"), g = /* @__PURE__ */ s('<span class="w-2.5 h-2.5">'), v = /* @__PURE__ */ s("<button type=button>"), d = /* @__PURE__ */ s("<span>");
6
6
  function C(t) {
7
7
  return (() => {
8
8
  var r = h();
9
- return n(r, () => t.children), a(() => u(r, m(t.height ?? "h-5", "shrink-0 flex items-center justify-between px-1.5", "bg-background border-t border-border", "text-[10px] text-muted-foreground font-mono", t.class))), r;
9
+ return n(r, () => t.children), c(() => i(r, f(t.height ?? "h-5", "shrink-0 flex items-center justify-between px-1.5", "bg-background border-t border-[var(--floe-line)]", "text-caption text-[var(--floe-ink-soft)] font-mono", t.class))), r;
10
10
  })();
11
11
  }
12
12
  function $(t) {
13
- const r = () => m("flex items-center gap-1 px-1 py-0.5 rounded-sm", t.onClick && "hover:bg-muted/80 cursor-pointer", "transition-colors duration-75", t.class);
14
- return c(s, {
13
+ const r = () => f("flex items-center gap-1 px-1 py-0.5 rounded-sm", t.onClick && "hover:bg-[var(--floe-state-hover)] cursor-pointer", "transition-colors duration-[var(--floe-duration-instant)]", t.class);
14
+ return a(u, {
15
15
  get when() {
16
16
  return t.onClick;
17
17
  },
18
18
  get fallback() {
19
19
  return (() => {
20
20
  var e = d();
21
- return n(e, c(s, {
21
+ return n(e, a(u, {
22
22
  get when() {
23
23
  return t.icon;
24
24
  },
@@ -26,12 +26,12 @@ function $(t) {
26
26
  var o = g();
27
27
  return n(o, () => t.icon), o;
28
28
  }
29
- }), null), n(e, () => t.children, null), a(() => u(e, r())), e;
29
+ }), null), n(e, () => t.children, null), c(() => i(e, r())), e;
30
30
  })();
31
31
  },
32
32
  get children() {
33
33
  var e = v();
34
- return e.$$click = () => t.onClick?.(), n(e, c(s, {
34
+ return e.$$click = () => t.onClick?.(), n(e, a(u, {
35
35
  get when() {
36
36
  return t.icon;
37
37
  },
@@ -39,22 +39,22 @@ function $(t) {
39
39
  var o = g();
40
40
  return n(o, () => t.icon), o;
41
41
  }
42
- }), null), n(e, () => t.children, null), a(() => u(e, r())), e;
42
+ }), null), n(e, () => t.children, null), c(() => i(e, r())), e;
43
43
  }
44
44
  });
45
45
  }
46
46
  function y(t) {
47
- const r = f(), e = {
47
+ const r = b(), e = {
48
48
  connected: "bg-success",
49
- disconnected: "bg-muted-foreground",
49
+ disconnected: "bg-[var(--floe-ink-ghost)]",
50
50
  connecting: "bg-warning animate-pulse",
51
51
  error: "bg-error"
52
52
  }, o = () => r.config.strings.statusIndicator;
53
- return c($, {
53
+ return a($, {
54
54
  get children() {
55
55
  return [(() => {
56
56
  var l = d();
57
- return a(() => u(l, m("w-1.5 h-1.5 rounded-full", e[t.status]))), l;
57
+ return c(() => i(l, f("w-1.5 h-1.5 rounded-full", e[t.status]))), l;
58
58
  })(), (() => {
59
59
  var l = d();
60
60
  return n(l, () => t.label ?? o()[t.status]), l;
@@ -62,7 +62,7 @@ function y(t) {
62
62
  }
63
63
  });
64
64
  }
65
- b(["click"]);
65
+ m(["click"]);
66
66
  export {
67
67
  C as BottomBar,
68
68
  $ as BottomBarItem,