@cratis/components 1.8.2 → 1.9.1

package/dist/esm/Toolbar/ToolbarSlot.js

@@ -0,0 +1,121 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useId, useContext, useLayoutEffect, useEffect, useState, useCallback, useSyncExternalStore } from 'react';
+
+/** Stable empty snapshot returned when a slot name has no registered content. */
+const _emptySnapshot = [];
+/**
+ * Registry for named toolbar slot entries.
+ * Maintained outside React state so slot registrations never re-render the provider.
+ */
+class ToolbarSlotRegistry {
+    _slots = new Map();
+    _snapshots = new Map();
+    _subscribers = new Set();
+    /**
+     * Register or update a slot entry.
+     * Notifies subscribers only when the content reference or order actually changes.
+     */
+    register(slotName, id, content, order) {
+        if (!this._slots.has(slotName)) {
+            this._slots.set(slotName, new Map());
+        }
+        const slotMap = this._slots.get(slotName);
+        const previous = slotMap.get(id);
+        if (previous?.content === content && previous?.order === order)
+            return;
+        slotMap.set(id, { content, order });
+        this._recompute(slotName);
+        this._notify();
+    }
+    /** Remove a slot entry and notify subscribers. */
+    unregister(slotName, id) {
+        const slotMap = this._slots.get(slotName);
+        if (!slotMap?.has(id))
+            return;
+        slotMap.delete(id);
+        this._recompute(slotName);
+        this._notify();
+    }
+    /** Subscribe to any slot change. Returns an unsubscribe function. */
+    subscribe(fn) {
+        this._subscribers.add(fn);
+        return () => this._subscribers.delete(fn);
+    }
+    /**
+     * Returns a stable snapshot of sorted slot contents for the given slot name.
+     * The reference only changes when the slot set actually changes.
+     */
+    getSnapshot(slotName) {
+        return this._snapshots.get(slotName) ?? _emptySnapshot;
+    }
+    _recompute(slotName) {
+        const slotMap = this._slots.get(slotName);
+        if (!slotMap || slotMap.size === 0) {
+            this._snapshots.delete(slotName);
+            return;
+        }
+        this._snapshots.set(slotName, [...slotMap.values()]
+            .sort((a, b) => a.order - b.order)
+            .map(entry => entry.content));
+    }
+    _notify() {
+        this._subscribers.forEach(fn => fn());
+    }
+}
+const ToolbarSlotContext = createContext(null);
+/**
+ * Provides the toolbar slot registry to the component tree.
+ *
+ * Mount once above both the toolbar and the components that fill slots.
+ * Each provider creates an isolated registry — nesting providers creates isolated scopes.
+ */
+const ToolbarSlotProvider = ({ children }) => {
+    const [registry] = useState(() => new ToolbarSlotRegistry());
+    return jsx(ToolbarSlotContext.Provider, { value: registry, children: children });
+};
+/**
+ * Returns the sorted slot contents for a given `slotName` as a stable array.
+ * Returns an empty array when no {@link ToolbarSlotProvider} is present or when the slot has no content.
+ *
+ * Suitable for direct use inside components that host a slot (e.g. {@link ToolbarGroup}).
+ */
+const useToolbarSlot = (slotName) => {
+    const registry = useContext(ToolbarSlotContext);
+    const subscribe = useCallback((fn) => {
+        if (!registry)
+            return () => { };
+        return registry.subscribe(fn);
+    }, [registry]);
+    const getSnapshot = useCallback(() => registry?.getSnapshot(slotName) ?? _emptySnapshot, [registry, slotName]);
+    return useSyncExternalStore(subscribe, getSnapshot);
+};
+/**
+ * Teleports its children into the named toolbar slot without prop drilling.
+ * Renders nothing itself — place it anywhere inside a {@link ToolbarSlotProvider} tree.
+ *
+ * The nearest {@link ToolbarGroup} or {@link ToolbarContext} with a matching `slotName`
+ * will render the content. Use {@link ToolbarSlotProps.order} to control position relative to
+ * other {@link ToolbarSlot} entries in the same slot.
+ *
+ * @example
+ * ```tsx
+ * // In a feature component, inject a button into the 'canvas-tools' slot:
+ * <ToolbarSlot slotName="canvas-tools" order={10}>
+ *     <ToolbarButton icon="pi pi-star" title="Favorite" />
+ * </ToolbarSlot>
+ * ```
+ */
+const ToolbarSlot = ({ slotName, order = 0, children }) => {
+    const id = useId();
+    const registry = useContext(ToolbarSlotContext);
+    // Re-register on every render so fresh closures are always captured.
+    // The registry skips notification when the content reference hasn't changed.
+    useLayoutEffect(() => {
+        registry?.register(slotName, id, children, order);
+    });
+    useEffect(() => () => registry?.unregister(slotName, id), [id, registry, slotName]);
+    return null;
+};
+
+export { ToolbarSlot, ToolbarSlotProvider, useToolbarSlot };
+//# sourceMappingURL=ToolbarSlot.js.map

package/dist/esm/Toolbar/ToolbarSlot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarSlot.js","sources":["../../../Toolbar/ToolbarSlot.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAYA;AACA,MAAM,cAAc,GAAgB,EAAE;AAEtC;;;AAGG;AACH,MAAM,mBAAmB,CAAA;AACJ,IAAA,MAAM,GAAG,IAAI,GAAG,EAAkC;AAClD,IAAA,UAAU,GAAG,IAAI,GAAG,EAAuB;AAC3C,IAAA,YAAY,GAAG,IAAI,GAAG,EAAc;AAErD;;;AAGG;AACH,IAAA,QAAQ,CAAC,QAAgB,EAAE,EAAU,EAAE,OAAkB,EAAE,KAAa,EAAA;QACpE,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YAC5B,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,GAAG,EAAE,CAAC;QACxC;QACA,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAE;QAC1C,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;QAChC,IAAI,QAAQ,EAAE,OAAO,KAAK,OAAO,IAAI,QAAQ,EAAE,KAAK,KAAK,KAAK;YAAE;QAChE,OAAO,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;AACnC,QAAA,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;QACzB,IAAI,CAAC,OAAO,EAAE;IAClB;;IAGA,UAAU,CAAC,QAAgB,EAAE,EAAU,EAAA;QACnC,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC;AACzC,QAAA,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,EAAE,CAAC;YAAE;AACvB,QAAA,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;AAClB,QAAA,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;QACzB,IAAI,CAAC,OAAO,EAAE;IAClB;;AAGA,IAAA,SAAS,CAAC,EAAc,EAAA;AACpB,QAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;QACzB,OAAO,MAAM,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;IAC7C;AAEA;;;AAGG;AACH,IAAA,WAAW,CAAC,QAAgB,EAAA;QACxB,OAAO,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,cAAc;IAC1D;AAEQ,IAAA,UAAU,CAAC,QAAgB,EAAA;QAC/B,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC;QACzC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,IAAI,KAAK,CAAC,EAAE;AAChC,YAAA,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,QAAQ,CAAC;YAChC;QACJ;AACA,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CACf,QAAQ,EACR,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE;AACf,aAAA,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK;aAChC,GAAG,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,CACnC;IACL;IAEQ,OAAO,GAAA;AACX,QAAA,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC;IACzC;AACH;AAED,MAAM,kBAAkB,GAAG,aAAa,CAA6B,IAAI,CAAC;AAW1E;;;;;AAKG;MACU,mBAAmB,GAAG,CAAC,EAAE,QAAQ,EAA4B,KAAI;AAC1E,IAAA,MAAM,CAAC,QAAQ,CAAC,GAAG,QAAQ,CAAC,MAAM,IAAI,mBAAmB,EAAE,CAAC;IAC5D,OAAOA,GAAA,CAAC,kBAAkB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,QAAQ,EAAA,QAAA,EAAG,QAAQ,EAAA,CAA+B;AACjG;AAEA;;;;;AAKG;AACI,MAAM,cAAc,GAAG,CAAC,QAAgB,KAAiB;AAC5D,IAAA,MAAM,QAAQ,GAAG,UAAU,CAAC,kBAAkB,CAAC;AAC/C,IAAA,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,EAAc,KAAI;AAC7C,QAAA,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAO,MAAK,EAAuD,CAAC;AACnF,QAAA,OAAO,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;AACjC,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IACd,MAAM,WAAW,GAAG,WAAW,CAAC,MAAM,QAAQ,EAAE,WAAW,CAAC,QAAQ,CAAC,IAAI,cAAc,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC9G,IAAA,OAAO,oBAAoB,CAAC,SAAS,EAAE,WAAW,CAAC;AACvD;AAuBA;;;;;;;;;;;;;;;AAeG;AACI,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAoB,KAAI;AAC/E,IAAA,MAAM,EAAE,GAAG,KAAK,EAAE;AAClB,IAAA,MAAM,QAAQ,GAAG,UAAU,CAAC,kBAAkB,CAAC;;;IAI/C,eAAe,CAAC,MAAK;QACjB,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC;AACrD,IAAA,CAAC,CAAC;IAEF,SAAS,CAAC,MAAM,MAAM,QAAQ,EAAE,UAAU,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAEnF,IAAA,OAAO,IAAI;AACf;;;;"}

package/dist/esm/Toolbar/index.d.ts

@@ -4,6 +4,8 @@ export { ToolbarButton } from './ToolbarButton';
 export type { ToolbarButtonProps } from './ToolbarButton';
 export { ToolbarContext } from './ToolbarContext';
 export type { ToolbarContextProps } from './ToolbarContext';
+export { ToolbarGroup } from './ToolbarGroup';
+export type { ToolbarGroupProps } from './ToolbarGroup';
 export { ToolbarSection } from './ToolbarSection';
 export type { ToolbarSectionProps } from './ToolbarSection';
 export { ToolbarSeparator } from './ToolbarSeparator';
@@ -12,4 +14,7 @@ export { ToolbarFanOutItem } from './ToolbarFanOutItem';
 export type { ToolbarFanOutItemProps } from './ToolbarFanOutItem';
 export { ToolbarFolder } from './ToolbarFolder';
 export type { ToolbarFolderProps } from './ToolbarFolder';
+export type { ToolbarFolderMode } from './ToolbarFolderContext';
+export { ToolbarSlot, ToolbarSlotProvider, useToolbarSlot } from './ToolbarSlot';
+export type { ToolbarSlotProps, ToolbarSlotProviderProps } from './ToolbarSlot';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/Toolbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../Toolbar/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../Toolbar/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,YAAY,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACjF,YAAY,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC"}

package/dist/esm/Toolbar/index.js

@@ -1,10 +1,12 @@
 export { Toolbar } from './Toolbar.js';
 export { ToolbarButton } from './ToolbarButton.js';
 export { ToolbarContext } from './ToolbarContext.js';
+export { ToolbarGroup } from './ToolbarGroup.js';
 export { ToolbarSection } from './ToolbarSection.js';
 export { ToolbarSeparator } from './ToolbarSeparator.js';
 export { ToolbarFanOutItem } from './ToolbarFanOutItem.js';
 export { ToolbarFolder } from './ToolbarFolder.js';
+export { ToolbarSlot, ToolbarSlotProvider, useToolbarSlot } from './ToolbarSlot.js';
 
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.

package/dist/esm/Toolbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../Toolbar/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAAA;AACA"}
+{"version":3,"file":"index.js","sources":["../../../Toolbar/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;AAAA;AACA"}

package/dist/esm/tailwind-utilities.css

@@ -335,6 +335,9 @@
   .block {
     display: block;
   }
+  .contents {
+    display: contents;
+  }
   .flex {
     display: flex;
   }
@@ -371,6 +374,9 @@
   .flex-1 {
     flex: 1;
   }
+  .flex-shrink-0 {
+    flex-shrink: 0;
+  }
   .flex-grow {
     flex-grow: 1;
   }
@@ -409,6 +415,9 @@
   .justify-center {
     justify-content: center;
   }
+  .justify-start {
+    justify-content: flex-start;
+  }
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
@@ -424,6 +433,9 @@
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
+  .gap-8 {
+    gap: calc(var(--spacing) * 8);
+  }
   .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;