@almadar/ui 5.76.6 → 5.77.0

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.
@@ -8555,7 +8555,11 @@ var init_Switch = __esm({
8555
8555
  disabled,
8556
8556
  onClick: handleClick,
8557
8557
  className: cn(
8558
- "relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
8558
+ // Fixed rem sizes instead of spacing tokens: themes like atelier
8559
+ // redefine --space-11 to 68px, which makes w-11 enormous and leaves
8560
+ // the thumb stuck near the left edge. The switch geometry must stay
8561
+ // proportional regardless of a theme's density scale.
8562
+ "relative inline-flex h-[1.5rem] w-[2.75rem] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
8559
8563
  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
8560
8564
  isChecked ? "bg-primary" : "bg-muted",
8561
8565
  disabled && "cursor-not-allowed opacity-50"
@@ -8564,8 +8568,8 @@ var init_Switch = __esm({
8564
8568
  "span",
8565
8569
  {
8566
8570
  className: cn(
8567
- "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform",
8568
- isChecked ? "translate-x-5" : "translate-x-0"
8571
+ "pointer-events-none block h-[1.25rem] w-[1.25rem] rounded-full bg-background shadow-lg ring-0 transition-transform",
8572
+ isChecked ? "translate-x-[1.25rem]" : "translate-x-0"
8569
8573
  )
8570
8574
  }
8571
8575
  )
@@ -15904,318 +15908,14 @@ var init_useCanvasEffects = __esm({
15904
15908
  "use client";
15905
15909
  }
15906
15910
  });
15907
- function pickPath(entry) {
15908
- if (Array.isArray(entry.path)) {
15909
- return entry.path[Math.floor(Math.random() * entry.path.length)];
15910
- }
15911
- return entry.path;
15912
- }
15913
- function useGameAudio({
15914
- manifest,
15915
- baseUrl = "",
15916
- initialMuted = false,
15917
- initialVolume = 1
15918
- }) {
15919
- const [muted, setMutedState] = React114.useState(initialMuted);
15920
- const [masterVolume, setMasterVolumeState] = React114.useState(initialVolume);
15921
- const mutedRef = React114.useRef(muted);
15922
- const volumeRef = React114.useRef(masterVolume);
15923
- const manifestRef = React114.useRef(manifest);
15924
- mutedRef.current = muted;
15925
- volumeRef.current = masterVolume;
15926
- manifestRef.current = manifest;
15927
- const poolsRef = React114.useRef(/* @__PURE__ */ new Map());
15928
- const getOrCreateElement = React114.useCallback((key) => {
15929
- const entry = manifestRef.current[key];
15930
- if (!entry) return null;
15931
- let pool = poolsRef.current.get(key);
15932
- if (!pool) {
15933
- pool = [];
15934
- poolsRef.current.set(key, pool);
15935
- }
15936
- const maxSize = entry.poolSize ?? 1;
15937
- for (const audio of pool) {
15938
- if (audio.paused && (audio.ended || audio.currentTime === 0)) {
15939
- return audio;
15940
- }
15941
- }
15942
- if (pool.length < maxSize) {
15943
- const src = baseUrl + pickPath(entry);
15944
- const audio = new Audio(src);
15945
- audio.loop = entry.loop ?? false;
15946
- pool.push(audio);
15947
- return audio;
15948
- }
15949
- if (!entry.loop) {
15950
- let oldest = pool[0];
15951
- for (const audio of pool) {
15952
- if (audio.currentTime > oldest.currentTime) {
15953
- oldest = audio;
15954
- }
15955
- }
15956
- oldest.pause();
15957
- oldest.currentTime = 0;
15958
- return oldest;
15959
- }
15960
- return null;
15961
- }, [baseUrl]);
15962
- const play = React114.useCallback((key) => {
15963
- if (mutedRef.current) return;
15964
- const entry = manifestRef.current[key];
15965
- if (!entry) return;
15966
- const audio = getOrCreateElement(key);
15967
- if (!audio) return;
15968
- audio.volume = Math.min(1, (entry.volume ?? 1) * volumeRef.current);
15969
- if (!entry.loop) {
15970
- audio.currentTime = 0;
15971
- }
15972
- const promise = audio.play();
15973
- if (promise) {
15974
- promise.catch(() => {
15975
- });
15976
- }
15977
- }, [getOrCreateElement]);
15978
- const stop = React114.useCallback((key) => {
15979
- const pool = poolsRef.current.get(key);
15980
- if (!pool) return;
15981
- for (const audio of pool) {
15982
- audio.pause();
15983
- audio.currentTime = 0;
15984
- }
15985
- }, []);
15986
- const currentMusicKeyRef = React114.useRef(null);
15987
- const currentMusicElRef = React114.useRef(null);
15988
- const musicFadeRef = React114.useRef(null);
15989
- const pendingMusicKeyRef = React114.useRef(null);
15990
- const clearMusicFade = React114.useCallback(() => {
15991
- if (musicFadeRef.current) {
15992
- clearInterval(musicFadeRef.current);
15993
- musicFadeRef.current = null;
15994
- }
15995
- }, []);
15996
- const playMusic = React114.useCallback((key) => {
15997
- if (key === currentMusicKeyRef.current) return;
15998
- pendingMusicKeyRef.current = key;
15999
- const entry = manifestRef.current[key];
16000
- if (!entry) return;
16001
- const fadeDurationMs = entry.crossfadeDurationMs ?? 1500;
16002
- const stepMs = 50;
16003
- const totalSteps = Math.max(1, fadeDurationMs / stepMs);
16004
- const targetVolume = Math.min(1, (entry.volume ?? 1) * volumeRef.current);
16005
- clearMusicFade();
16006
- const src = baseUrl + (Array.isArray(entry.path) ? entry.path[0] : entry.path);
16007
- const incoming = new Audio(src);
16008
- incoming.loop = true;
16009
- incoming.volume = 0;
16010
- const outgoing = currentMusicElRef.current;
16011
- const outgoingStartVol = outgoing?.volume ?? 0;
16012
- currentMusicKeyRef.current = key;
16013
- currentMusicElRef.current = incoming;
16014
- if (!mutedRef.current) {
16015
- incoming.play().catch(() => {
16016
- currentMusicKeyRef.current = null;
16017
- currentMusicElRef.current = outgoing;
16018
- });
16019
- }
16020
- let step = 0;
16021
- musicFadeRef.current = setInterval(() => {
16022
- step++;
16023
- const progress = Math.min(step / totalSteps, 1);
16024
- incoming.volume = Math.min(1, targetVolume * progress);
16025
- if (outgoing) {
16026
- outgoing.volume = Math.max(0, outgoingStartVol * (1 - progress));
16027
- }
16028
- if (progress >= 1) {
16029
- clearMusicFade();
16030
- if (outgoing) {
16031
- outgoing.pause();
16032
- outgoing.src = "";
16033
- }
16034
- }
16035
- }, stepMs);
16036
- }, [baseUrl, clearMusicFade]);
16037
- const stopMusic = React114.useCallback((fadeDurationMs = 1e3) => {
16038
- const outgoing = currentMusicElRef.current;
16039
- if (!outgoing) return;
16040
- currentMusicKeyRef.current = null;
16041
- currentMusicElRef.current = null;
16042
- pendingMusicKeyRef.current = null;
16043
- clearMusicFade();
16044
- const startVolume = outgoing.volume;
16045
- const stepMs = 50;
16046
- const totalSteps = Math.max(1, fadeDurationMs / stepMs);
16047
- let step = 0;
16048
- musicFadeRef.current = setInterval(() => {
16049
- step++;
16050
- const progress = step / totalSteps;
16051
- outgoing.volume = Math.max(0, startVolume * (1 - progress));
16052
- if (progress >= 1) {
16053
- clearMusicFade();
16054
- outgoing.pause();
16055
- outgoing.src = "";
16056
- }
16057
- }, stepMs);
16058
- }, [clearMusicFade]);
16059
- const stopAll = React114.useCallback(() => {
16060
- for (const pool of poolsRef.current.values()) {
16061
- for (const audio of pool) {
16062
- audio.pause();
16063
- audio.currentTime = 0;
16064
- }
16065
- }
16066
- stopMusic(0);
16067
- }, [stopMusic]);
16068
- const setMuted = React114.useCallback((value) => {
16069
- setMutedState(value);
16070
- if (value) {
16071
- for (const [key, pool] of poolsRef.current.entries()) {
16072
- if (manifestRef.current[key]?.loop) {
16073
- for (const audio of pool) {
16074
- if (!audio.paused) audio.pause();
16075
- }
16076
- }
16077
- }
16078
- currentMusicElRef.current?.pause();
16079
- } else {
16080
- for (const [key, pool] of poolsRef.current.entries()) {
16081
- const entry = manifestRef.current[key];
16082
- if (entry?.loop && entry?.autostart) {
16083
- for (const audio of pool) {
16084
- if (audio.paused) audio.play().catch(() => {
16085
- });
16086
- }
16087
- }
16088
- }
16089
- const musicEl = currentMusicElRef.current;
16090
- if (musicEl) {
16091
- musicEl.play().catch(() => {
16092
- });
16093
- }
16094
- }
16095
- }, []);
16096
- const setMasterVolume = React114.useCallback((volume) => {
16097
- const clamped = Math.max(0, Math.min(1, volume));
16098
- setMasterVolumeState(clamped);
16099
- for (const [key, pool] of poolsRef.current.entries()) {
16100
- const entryVol = manifestRef.current[key]?.volume ?? 1;
16101
- for (const audio of pool) {
16102
- audio.volume = Math.min(1, entryVol * clamped);
16103
- }
16104
- }
16105
- if (!musicFadeRef.current && currentMusicElRef.current) {
16106
- const key = currentMusicKeyRef.current;
16107
- const entryVol = key ? manifestRef.current[key]?.volume ?? 1 : 1;
16108
- currentMusicElRef.current.volume = Math.min(1, entryVol * clamped);
16109
- }
16110
- }, []);
16111
- const unlockedRef = React114.useRef(false);
16112
- React114.useEffect(() => {
16113
- const autoKeys = Object.keys(manifest).filter((k) => manifest[k].autostart);
16114
- const hasPendingMusic = () => pendingMusicKeyRef.current !== null;
16115
- const hasAutoStart = autoKeys.length > 0;
16116
- if (!hasAutoStart && !hasPendingMusic()) return;
16117
- const unlock = () => {
16118
- if (unlockedRef.current) return;
16119
- unlockedRef.current = true;
16120
- if (!mutedRef.current) {
16121
- for (const key of autoKeys) {
16122
- play(key);
16123
- }
16124
- const pending = pendingMusicKeyRef.current;
16125
- if (pending && pending !== currentMusicKeyRef.current) {
16126
- playMusic(pending);
16127
- }
16128
- }
16129
- };
16130
- document.addEventListener("click", unlock, { once: true });
16131
- document.addEventListener("keydown", unlock, { once: true });
16132
- document.addEventListener("touchstart", unlock, { once: true });
16133
- return () => {
16134
- document.removeEventListener("click", unlock);
16135
- document.removeEventListener("keydown", unlock);
16136
- document.removeEventListener("touchstart", unlock);
16137
- };
16138
- }, [manifest, play, playMusic]);
16139
- React114.useEffect(() => {
16140
- return () => {
16141
- clearMusicFade();
16142
- for (const pool of poolsRef.current.values()) {
16143
- for (const audio of pool) {
16144
- audio.pause();
16145
- audio.src = "";
16146
- }
16147
- }
16148
- poolsRef.current.clear();
16149
- if (currentMusicElRef.current) {
16150
- currentMusicElRef.current.pause();
16151
- currentMusicElRef.current.src = "";
16152
- currentMusicElRef.current = null;
16153
- }
16154
- };
16155
- }, [clearMusicFade]);
16156
- return {
16157
- play,
16158
- stop,
16159
- stopAll,
16160
- playMusic,
16161
- stopMusic,
16162
- muted,
16163
- setMuted,
16164
- masterVolume,
16165
- setMasterVolume
16166
- };
16167
- }
16168
15911
  var init_useGameAudio = __esm({
16169
15912
  "components/game/shared/hooks/useGameAudio.ts"() {
16170
15913
  "use client";
16171
- useGameAudio.displayName = "useGameAudio";
16172
15914
  }
16173
15915
  });
16174
15916
  function useGameAudioContextOptional() {
16175
15917
  return React114.useContext(GameAudioContext);
16176
15918
  }
16177
- function GameAudioProvider({
16178
- manifest,
16179
- baseUrl = "",
16180
- children,
16181
- initialMuted = false
16182
- }) {
16183
- const eventBus = useEventBus();
16184
- const { play, stop, stopAll, playMusic, stopMusic, muted, setMuted, masterVolume, setMasterVolume } = useGameAudio({ manifest, baseUrl, initialMuted });
16185
- React114.useEffect(() => {
16186
- const unsubPlay = eventBus.on("UI:PLAY_SOUND", (event) => {
16187
- const key = event.payload?.key;
16188
- if (key) play(key);
16189
- });
16190
- const unsubStop = eventBus.on("UI:STOP_SOUND", (event) => {
16191
- const key = event.payload?.key;
16192
- if (key) {
16193
- stop(key);
16194
- } else {
16195
- stopAll();
16196
- }
16197
- });
16198
- const unsubChangeMusic = eventBus.on("UI:CHANGE_MUSIC", (event) => {
16199
- const key = event.payload?.key;
16200
- if (key) {
16201
- playMusic(key);
16202
- } else {
16203
- stopMusic();
16204
- }
16205
- });
16206
- const unsubStopMusic = eventBus.on("UI:STOP_MUSIC", () => {
16207
- stopMusic();
16208
- });
16209
- return () => {
16210
- unsubPlay();
16211
- unsubStop();
16212
- unsubChangeMusic();
16213
- unsubStopMusic();
16214
- };
16215
- }, [eventBus, play, stop, stopAll, playMusic, stopMusic]);
16216
- const value = { muted, setMuted, masterVolume, setMasterVolume, play, playMusic, stopMusic };
16217
- return /* @__PURE__ */ jsxRuntime.jsx(GameAudioContext.Provider, { value, children });
16218
- }
16219
15919
  var GameAudioContext;
16220
15920
  var init_GameAudioProvider = __esm({
16221
15921
  "components/game/shared/providers/GameAudioProvider.tsx"() {
@@ -16224,7 +15924,6 @@ var init_GameAudioProvider = __esm({
16224
15924
  init_useGameAudio();
16225
15925
  GameAudioContext = React114.createContext(null);
16226
15926
  GameAudioContext.displayName = "GameAudioContext";
16227
- GameAudioProvider.displayName = "GameAudioProvider";
16228
15927
  }
16229
15928
  });
16230
15929
  function GameAudioToggle({
@@ -29967,129 +29666,6 @@ var init_Breadcrumb = __esm({
29967
29666
  Breadcrumb.displayName = "Breadcrumb";
29968
29667
  }
29969
29668
  });
29970
- function useSafeEventBus2() {
29971
- try {
29972
- return useEventBus();
29973
- } catch {
29974
- return { emit: () => {
29975
- }, on: () => () => {
29976
- }, once: () => {
29977
- } };
29978
- }
29979
- }
29980
- var log5, lookStyles4, ButtonGroup;
29981
- var init_ButtonGroup = __esm({
29982
- "components/core/molecules/ButtonGroup.tsx"() {
29983
- "use client";
29984
- init_cn();
29985
- init_atoms();
29986
- init_useEventBus();
29987
- log5 = logger.createLogger("almadar:ui:button-group");
29988
- lookStyles4 = {
29989
- "right-aligned-buttons": "",
29990
- "floating-bar": "fixed bottom-section left-1/2 -translate-x-1/2 shadow-elevation-toast bg-card p-card-sm rounded-container",
29991
- "inline-row": "gap-2 inline-flex",
29992
- "dropdown-menu": "[&>button:not(:first-child)]:hidden",
29993
- "command-palette-trigger": "[&>button:not(:first-child)]:hidden"
29994
- };
29995
- ButtonGroup = ({
29996
- children,
29997
- primary,
29998
- secondary,
29999
- variant = "default",
30000
- orientation = "horizontal",
30001
- className,
30002
- // Filter-group pattern props (entity and filters are used for schema-driven filtering)
30003
- entity: _entity,
30004
- filters,
30005
- look = "right-aligned-buttons"
30006
- }) => {
30007
- const eventBus = useSafeEventBus2();
30008
- const variantClasses2 = {
30009
- default: "gap-0",
30010
- segmented: "gap-0 [&>button]:rounded-none [&>button:first-child]:rounded-l-lg [&>button:last-child]:rounded-r-lg [&>button:not(:first-child)]:border-l-0",
30011
- toggle: "gap-0 [&>button]:rounded-none [&>button:first-child]:rounded-l-lg [&>button:last-child]:rounded-r-lg [&>button:not(:first-child)]:border-l-0"
30012
- };
30013
- const orientationClasses = {
30014
- horizontal: "flex-row",
30015
- vertical: "flex-col [&>button:first-child]:rounded-t-lg [&>button:last-child]:rounded-b-lg [&>button:not(:first-child)]:border-t-0 [&>button:not(:first-child)]:border-l"
30016
- };
30017
- const handleActionClick = (action) => {
30018
- if (action.event) {
30019
- eventBus.emit("UI:DISPATCH", { event: action.event });
30020
- }
30021
- if (action.navigatesTo) {
30022
- eventBus.emit("UI:NAVIGATE", { url: action.navigatesTo });
30023
- }
30024
- };
30025
- const renderFormActions = () => {
30026
- const buttons = [];
30027
- if (secondary) {
30028
- secondary.forEach((action, index) => {
30029
- buttons.push(
30030
- /* @__PURE__ */ jsxRuntime.jsx(
30031
- Button,
30032
- {
30033
- type: action.actionType === "submit" ? "submit" : "button",
30034
- variant: action.variant || "ghost",
30035
- onClick: () => handleActionClick(action),
30036
- children: action.label
30037
- },
30038
- `secondary-${index}`
30039
- )
30040
- );
30041
- });
30042
- }
30043
- if (primary) {
30044
- const isSubmit = primary.actionType === "submit";
30045
- buttons.push(
30046
- /* @__PURE__ */ jsxRuntime.jsx(
30047
- Button,
30048
- {
30049
- type: isSubmit ? "submit" : "button",
30050
- variant: primary.variant || "primary",
30051
- onClick: () => handleActionClick(primary),
30052
- "data-testid": isSubmit ? "form-submit" : void 0,
30053
- children: primary.label
30054
- },
30055
- "primary"
30056
- )
30057
- );
30058
- }
30059
- return buttons;
30060
- };
30061
- const renderFilters = () => {
30062
- if (!filters || filters.length === 0) return null;
30063
- return filters.map((filter, index) => /* @__PURE__ */ jsxRuntime.jsx(
30064
- Button,
30065
- {
30066
- variant: "ghost",
30067
- onClick: () => {
30068
- log5.debug("Filter clicked", { field: filter.field });
30069
- },
30070
- children: filter.label
30071
- },
30072
- `filter-${filter.field}-${index}`
30073
- ));
30074
- };
30075
- return /* @__PURE__ */ jsxRuntime.jsx(
30076
- "div",
30077
- {
30078
- className: cn(
30079
- "inline-flex gap-2",
30080
- variantClasses2[variant],
30081
- orientationClasses[orientation],
30082
- lookStyles4[look],
30083
- className
30084
- ),
30085
- role: "group",
30086
- children: children || renderFilters() || renderFormActions()
30087
- }
30088
- );
30089
- };
30090
- ButtonGroup.displayName = "ButtonGroup";
30091
- }
30092
- });
30093
29669
  function useSwipeGesture(callbacks, options = {}) {
30094
29670
  const { threshold = 50, velocityThreshold = 0.3, preventDefault = false } = options;
30095
29671
  const startX = React114.useRef(0);
@@ -30899,7 +30475,7 @@ var init_CardGrid = __esm({
30899
30475
  CardGrid.displayName = "CardGrid";
30900
30476
  }
30901
30477
  });
30902
- function useSafeEventBus3() {
30478
+ function useSafeEventBus2() {
30903
30479
  try {
30904
30480
  return useEventBus();
30905
30481
  } catch {
@@ -30935,7 +30511,7 @@ var init_Carousel = __esm({
30935
30511
  const [activeIndex, setActiveIndex] = React114.useState(0);
30936
30512
  const scrollRef = React114.useRef(null);
30937
30513
  const autoPlayRef = React114.useRef(null);
30938
- const eventBus = useSafeEventBus3();
30514
+ const eventBus = useSafeEventBus2();
30939
30515
  const { t } = hooks.useTranslate();
30940
30516
  const safeItems = items ?? [];
30941
30517
  const totalSlides = safeItems.length;
@@ -34271,7 +33847,7 @@ function DataGrid({
34271
33847
  /* @__PURE__ */ jsxRuntime.jsx(
34272
33848
  Box,
34273
33849
  {
34274
- className: cn("grid", gapStyles5[gap], scrollX ? "grid-flow-col overflow-x-auto" : colsClass, lookStyles5[look], className),
33850
+ className: cn("grid", gapStyles5[gap], scrollX ? "grid-flow-col overflow-x-auto" : colsClass, lookStyles4[look], className),
34275
33851
  style: scrollX ? { gridAutoFlow: "column", gridAutoColumns: `minmax(${minCardWidth}px, 1fr)` } : gridTemplateColumns ? { gridTemplateColumns } : void 0,
34276
33852
  children: data.map((item, index) => {
34277
33853
  const itemData = item;
@@ -34466,7 +34042,7 @@ function DataGrid({
34466
34042
  ] })
34467
34043
  );
34468
34044
  }
34469
- var dataGridLog, BADGE_VARIANTS, gapStyles5, lookStyles5;
34045
+ var dataGridLog, BADGE_VARIANTS, gapStyles5, lookStyles4;
34470
34046
  var init_DataGrid = __esm({
34471
34047
  "components/core/molecules/DataGrid.tsx"() {
34472
34048
  "use client";
@@ -34501,7 +34077,7 @@ var init_DataGrid = __esm({
34501
34077
  lg: "gap-6",
34502
34078
  xl: "gap-8"
34503
34079
  };
34504
- lookStyles5 = {
34080
+ lookStyles4 = {
34505
34081
  dense: "gap-2 [&>*]:p-card-sm",
34506
34082
  spacious: "gap-8 [&>*]:p-card-lg",
34507
34083
  striped: "[&>*:nth-child(even)]:bg-muted/30",
@@ -34928,6 +34504,133 @@ var init_DataList = __esm({
34928
34504
  DataList.displayName = "DataList";
34929
34505
  }
34930
34506
  });
34507
+ var FormSection, FormLayout, FormActions;
34508
+ var init_FormSection = __esm({
34509
+ "components/core/molecules/FormSection.tsx"() {
34510
+ "use client";
34511
+ init_cn();
34512
+ init_atoms();
34513
+ init_Box();
34514
+ init_Typography();
34515
+ init_Button();
34516
+ init_Stack();
34517
+ init_Icon();
34518
+ init_useEventBus();
34519
+ FormSection = ({
34520
+ title,
34521
+ description,
34522
+ children,
34523
+ collapsible = false,
34524
+ defaultCollapsed = false,
34525
+ card = false,
34526
+ columns = 1,
34527
+ className
34528
+ }) => {
34529
+ const [collapsed, setCollapsed] = React114__namespace.default.useState(defaultCollapsed);
34530
+ const { t } = hooks.useTranslate();
34531
+ const eventBus = useEventBus();
34532
+ const gridClass = {
34533
+ 1: "grid-cols-1",
34534
+ 2: "grid-cols-1 md:grid-cols-2",
34535
+ 3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
34536
+ }[columns];
34537
+ React114__namespace.default.useCallback(() => {
34538
+ if (collapsible) {
34539
+ setCollapsed((prev) => !prev);
34540
+ eventBus.emit("UI:TOGGLE_COLLAPSE", { collapsed: !collapsed });
34541
+ }
34542
+ }, [collapsible, collapsed, eventBus]);
34543
+ const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
34544
+ (title || description) && /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", className: "mb-4", children: [
34545
+ title && /* @__PURE__ */ jsxRuntime.jsxs(
34546
+ HStack,
34547
+ {
34548
+ justify: "between",
34549
+ align: "center",
34550
+ className: cn(collapsible && "cursor-pointer"),
34551
+ action: collapsible ? "TOGGLE_COLLAPSE" : void 0,
34552
+ children: [
34553
+ /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", weight: "semibold", children: title }),
34554
+ collapsible && /* @__PURE__ */ jsxRuntime.jsx(
34555
+ Button,
34556
+ {
34557
+ variant: "ghost",
34558
+ size: "sm",
34559
+ action: "TOGGLE_COLLAPSE",
34560
+ children: /* @__PURE__ */ jsxRuntime.jsx(
34561
+ Icon,
34562
+ {
34563
+ icon: LucideIcons2.ChevronDown,
34564
+ size: "sm",
34565
+ className: cn(
34566
+ "text-muted-foreground transition-transform",
34567
+ collapsed && "rotate-180"
34568
+ )
34569
+ }
34570
+ )
34571
+ }
34572
+ )
34573
+ ]
34574
+ }
34575
+ ),
34576
+ description && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "secondary", children: description })
34577
+ ] }),
34578
+ (!collapsible || !collapsed) && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("grid gap-4", gridClass), children })
34579
+ ] });
34580
+ if (card) {
34581
+ return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("p-6", className), children: content });
34582
+ }
34583
+ return /* @__PURE__ */ jsxRuntime.jsx(Box, { className, children: content });
34584
+ };
34585
+ FormSection.displayName = "FormSection";
34586
+ FormLayout = ({
34587
+ children,
34588
+ dividers = true,
34589
+ className
34590
+ }) => {
34591
+ return /* @__PURE__ */ jsxRuntime.jsx(
34592
+ VStack,
34593
+ {
34594
+ gap: "lg",
34595
+ className: cn(
34596
+ dividers && "[&>*+*]:pt-8 [&>*+*]:border-t [&>*+*]:border-border",
34597
+ className
34598
+ ),
34599
+ children
34600
+ }
34601
+ );
34602
+ };
34603
+ FormLayout.displayName = "FormLayout";
34604
+ FormActions = ({
34605
+ children,
34606
+ sticky = false,
34607
+ align = "right",
34608
+ className
34609
+ }) => {
34610
+ const alignClass2 = {
34611
+ left: "justify-start",
34612
+ right: "justify-end",
34613
+ between: "justify-between",
34614
+ center: "justify-center"
34615
+ }[align];
34616
+ return /* @__PURE__ */ jsxRuntime.jsx(
34617
+ HStack,
34618
+ {
34619
+ gap: "sm",
34620
+ align: "center",
34621
+ className: cn(
34622
+ "pt-6 border-t border-border",
34623
+ alignClass2,
34624
+ sticky && "sticky bottom-0 bg-card py-4 -mx-6 px-6 shadow-[0_-4px_6px_-1px_rgb(0,0,0,0.05)]",
34625
+ className
34626
+ ),
34627
+ children
34628
+ }
34629
+ );
34630
+ };
34631
+ FormActions.displayName = "FormActions";
34632
+ }
34633
+ });
34931
34634
  function fileIcon(name) {
34932
34635
  const ext = name.split(".").pop()?.toLowerCase() ?? "";
34933
34636
  switch (ext) {
@@ -35089,6 +34792,129 @@ var init_FormField = __esm({
35089
34792
  FormField.displayName = "FormField";
35090
34793
  }
35091
34794
  });
34795
+ function useSafeEventBus3() {
34796
+ try {
34797
+ return useEventBus();
34798
+ } catch {
34799
+ return { emit: () => {
34800
+ }, on: () => () => {
34801
+ }, once: () => {
34802
+ } };
34803
+ }
34804
+ }
34805
+ var log5, lookStyles5, ButtonGroup;
34806
+ var init_ButtonGroup = __esm({
34807
+ "components/core/molecules/ButtonGroup.tsx"() {
34808
+ "use client";
34809
+ init_cn();
34810
+ init_atoms();
34811
+ init_useEventBus();
34812
+ log5 = logger.createLogger("almadar:ui:button-group");
34813
+ lookStyles5 = {
34814
+ "right-aligned-buttons": "",
34815
+ "floating-bar": "fixed bottom-section left-1/2 -translate-x-1/2 shadow-elevation-toast bg-card p-card-sm rounded-container",
34816
+ "inline-row": "gap-2 inline-flex",
34817
+ "dropdown-menu": "[&>button:not(:first-child)]:hidden",
34818
+ "command-palette-trigger": "[&>button:not(:first-child)]:hidden"
34819
+ };
34820
+ ButtonGroup = ({
34821
+ children,
34822
+ primary,
34823
+ secondary,
34824
+ variant = "default",
34825
+ orientation = "horizontal",
34826
+ className,
34827
+ // Filter-group pattern props (entity and filters are used for schema-driven filtering)
34828
+ entity: _entity,
34829
+ filters,
34830
+ look = "right-aligned-buttons"
34831
+ }) => {
34832
+ const eventBus = useSafeEventBus3();
34833
+ const variantClasses2 = {
34834
+ default: "gap-0",
34835
+ segmented: "gap-0 [&>button]:rounded-none [&>button:first-child]:rounded-l-lg [&>button:last-child]:rounded-r-lg [&>button:not(:first-child)]:border-l-0",
34836
+ toggle: "gap-0 [&>button]:rounded-none [&>button:first-child]:rounded-l-lg [&>button:last-child]:rounded-r-lg [&>button:not(:first-child)]:border-l-0"
34837
+ };
34838
+ const orientationClasses = {
34839
+ horizontal: "flex-row",
34840
+ vertical: "flex-col [&>button:first-child]:rounded-t-lg [&>button:last-child]:rounded-b-lg [&>button:not(:first-child)]:border-t-0 [&>button:not(:first-child)]:border-l"
34841
+ };
34842
+ const handleActionClick = (action) => {
34843
+ if (action.event) {
34844
+ eventBus.emit("UI:DISPATCH", { event: action.event });
34845
+ }
34846
+ if (action.navigatesTo) {
34847
+ eventBus.emit("UI:NAVIGATE", { url: action.navigatesTo });
34848
+ }
34849
+ };
34850
+ const renderFormActions = () => {
34851
+ const buttons = [];
34852
+ if (secondary) {
34853
+ secondary.forEach((action, index) => {
34854
+ buttons.push(
34855
+ /* @__PURE__ */ jsxRuntime.jsx(
34856
+ Button,
34857
+ {
34858
+ type: action.actionType === "submit" ? "submit" : "button",
34859
+ variant: action.variant || "ghost",
34860
+ onClick: () => handleActionClick(action),
34861
+ children: action.label
34862
+ },
34863
+ `secondary-${index}`
34864
+ )
34865
+ );
34866
+ });
34867
+ }
34868
+ if (primary) {
34869
+ const isSubmit = primary.actionType === "submit";
34870
+ buttons.push(
34871
+ /* @__PURE__ */ jsxRuntime.jsx(
34872
+ Button,
34873
+ {
34874
+ type: isSubmit ? "submit" : "button",
34875
+ variant: primary.variant || "primary",
34876
+ onClick: () => handleActionClick(primary),
34877
+ "data-testid": isSubmit ? "form-submit" : void 0,
34878
+ children: primary.label
34879
+ },
34880
+ "primary"
34881
+ )
34882
+ );
34883
+ }
34884
+ return buttons;
34885
+ };
34886
+ const renderFilters = () => {
34887
+ if (!filters || filters.length === 0) return null;
34888
+ return filters.map((filter, index) => /* @__PURE__ */ jsxRuntime.jsx(
34889
+ Button,
34890
+ {
34891
+ variant: "ghost",
34892
+ onClick: () => {
34893
+ log5.debug("Filter clicked", { field: filter.field });
34894
+ },
34895
+ children: filter.label
34896
+ },
34897
+ `filter-${filter.field}-${index}`
34898
+ ));
34899
+ };
34900
+ return /* @__PURE__ */ jsxRuntime.jsx(
34901
+ "div",
34902
+ {
34903
+ className: cn(
34904
+ "inline-flex gap-2",
34905
+ variantClasses2[variant],
34906
+ orientationClasses[orientation],
34907
+ lookStyles5[look],
34908
+ className
34909
+ ),
34910
+ role: "group",
34911
+ children: children || renderFilters() || renderFormActions()
34912
+ }
34913
+ );
34914
+ };
34915
+ ButtonGroup.displayName = "ButtonGroup";
34916
+ }
34917
+ });
35092
34918
  function getOrCreateStore(query) {
35093
34919
  if (!queryStores.has(query)) {
35094
34920
  queryStores.set(query, {
@@ -53259,7 +53085,6 @@ var init_component_registry_generated = __esm({
53259
53085
  init_BranchingLogicBuilder();
53260
53086
  init_Breadcrumb();
53261
53087
  init_BuilderBoard();
53262
- init_ButtonGroup();
53263
53088
  init_CTABanner();
53264
53089
  init_CalendarGrid();
53265
53090
  init_Canvas2D();
@@ -53336,9 +53161,9 @@ var init_component_registry_generated = __esm({
53336
53161
  init_FlipContainer();
53337
53162
  init_FloatingActionButton();
53338
53163
  init_Form();
53164
+ init_FormSection();
53339
53165
  init_FormField();
53340
53166
  init_FormSectionHeader();
53341
- init_GameAudioProvider();
53342
53167
  init_GameAudioToggle();
53343
53168
  init_GameCard();
53344
53169
  init_GameHud();
@@ -53587,7 +53412,6 @@ var init_component_registry_generated = __esm({
53587
53412
  "Breadcrumb": Breadcrumb,
53588
53413
  "BuilderBoard": BuilderBoard,
53589
53414
  "Button": ButtonPattern,
53590
- "ButtonGroup": ButtonGroup,
53591
53415
  "ButtonPattern": ButtonPattern,
53592
53416
  "CTABanner": CTABanner,
53593
53417
  "CalendarGrid": CalendarGrid,
@@ -53667,9 +53491,10 @@ var init_component_registry_generated = __esm({
53667
53491
  "FlipContainer": FlipContainer,
53668
53492
  "FloatingActionButton": FloatingActionButton,
53669
53493
  "Form": Form,
53494
+ "FormActions": FormActions,
53670
53495
  "FormField": FormField,
53496
+ "FormLayout": FormLayout,
53671
53497
  "FormSectionHeader": FormSectionHeader,
53672
- "GameAudioProvider": GameAudioProvider,
53673
53498
  "GameAudioToggle": GameAudioToggle,
53674
53499
  "GameBoard3D": GameBoard3D,
53675
53500
  "GameCanvas3D": GameCanvas3D,