@ship-ui/core 0.18.13 → 0.19.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ship-ui/core",
   "license": "MIT",
-  "version": "0.18.13",
+  "version": "0.19.1",
   "peerDependencies": {
     "@angular/common": ">=20",
     "@angular/core": ">=20",
@@ -23,13 +23,13 @@
     }
   ],
   "dependencies": {
-    "subset-font": "^2.3.0",
     "@phosphor-icons/web": "^2.1.1",
-    "glob": "13.0.2",
+    "harfbuzzjs": "^0.10.1",
+    "wawoff2": "^2.0.1",
     "tslib": "^2.3.0"
   },
   "bin": {
-    "ship-fg": "./bin/ship-fg-node",
+    "ship-fg": "./bin/ship-fg.mjs",
     "ship-mcp": "./bin/mcp/index.js"
   },
   "libraryIcons": [
@@ -72,5 +72,6 @@
   },
   "sideEffects": false,
   "module": "fesm2022/ship-ui-core.mjs",
-  "typings": "types/ship-ui-core.d.ts"
+  "typings": "types/ship-ui-core.d.ts",
+  "type": "module"
 }

package/snippets/ship-ui.code-snippets

@@ -34,13 +34,6 @@
     ],
     "description": "Basic usage of ShipSortable"
   },
-  "GridSortable: Basic": {
-    "prefix": "shGridSortable",
-    "body": [
-      "<div shGridSortable>$0</div>"
-    ],
-    "description": "Basic usage of GridSortable"
-  },
   "ShipColorPickerInput: Basic": {
     "prefix": "sh-color-picker-input",
     "body": [

package/styles/components/ship-sidenav.scss

@@ -29,13 +29,13 @@ $shipSidenav: true !default;
       height: 100%;
       overflow: auto;
       padding: p2r(16 16 16 0);
+      background-color: var(--base-1);
     }
 
     main {
       overflow-x: hidden;
       overflow-y: auto;
       -webkit-overflow-scrolling: auto;
-      background-color: var(--base-1);
       border: var(--border-10);
       border-radius: var(--shape-3);
       height: calc(100vh - 2rem);

package/styles/components/ship-sortable.scss

@@ -3,11 +3,13 @@
 $shipSortable: true !default;
 
 @if $shipSortable == true {
-  [shSortable] {
+  .sh-sortable {
     position: relative;
 
     &.dragging {
-      [draggable] {
+      [draggable],
+      .sortable-ghost {
+        cursor: grabbing;
         transition: transform 40ms linear;
       }
     }
@@ -18,33 +20,22 @@ $shipSortable: true !default;
       transition: none;
       z-index: 2;
       background: var(--base-1);
+      user-select: none;
 
-      &:has(:not([sort-handle])) {
+      &:not(:has([sort-handle])) {
         cursor: grab;
       }
     }
 
-    .sortable-placeholder {
-      position: absolute;
-      top: 0;
-      z-index: 1;
-
-      &.active {
-        z-index: 1;
-        background-color: var(--base-6);
-        border: var(--border-20);
-        opacity: 0.5;
-      }
+    .sortable-ghost {
+      opacity: 0.5;
+      z-index: 10;
     }
 
-    .sortable-ghost,
-    .sortable-ghost.active {
-      opacity: 1;
-    }
-
-    .sortable-dragged-el.active,
-    .sortable-dragged-el {
-      opacity: 0;
+    &.item-dragged-out {
+      .sortable-ghost {
+        display: none;
+      }
     }
 
     [sort-handle] {

package/types/ship-ui-core.d.ts

@@ -1,6 +1,7 @@
 import * as _angular_core from '@angular/core';
-import { ElementRef, QueryList, TemplateRef, OutputEmitterRef, InputSignal, ComponentRef, EmbeddedViewRef, OutputRefSubscription, Type, AfterViewInit, OnDestroy, AfterContentInit, WritableSignal, InjectionToken } from '@angular/core';
+import { ElementRef, QueryList, TemplateRef, OutputEmitterRef, InputSignal, ComponentRef, EmbeddedViewRef, OutputRefSubscription, Type, AfterViewInit, OnDestroy, AfterContentInit, WritableSignal, OnInit, InjectionToken } from '@angular/core';
 import { NgModel } from '@angular/forms';
+import { Observable } from 'rxjs';
 
 type ShipColor = 'primary' | 'accent' | 'warn' | 'error' | 'success' | (string & {});
 type ShipSize = 'small' | 'xsmall' | (string & {});
@@ -267,11 +268,12 @@ declare abstract class ShipSelectionGroup<T = any> {
     protected readonly hostElement: any;
     protected items: _angular_core.Signal<HTMLElement[]>;
     readonly value: _angular_core.ModelSignal<T | null>;
+    readonly closable: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
     constructor(itemSelector: string, activeClass: string);
     protected onClick(target: EventTarget | null): void;
     protected onKeyDown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipSelectionGroup<any>, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ShipSelectionGroup<any>, never, never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ShipSelectionGroup<any>, never, never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 declare class ShipButtonGroup extends ShipSelectionGroup<string> {
@@ -808,41 +810,71 @@ declare class ShipSidenav {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipSidenav, "sh-sidenav", never, { "disableDrag": { "alias": "disableDrag"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; }, never, ["[sidenav]", "[sidenav-closed-topbar]", "*"], true, never>;
 }
 
-declare class GridSortable {
-    #private;
-    onDragStart(event: DragEvent): void;
-    onDragOver(event: DragEvent): void;
-    onDragEnter(event: DragEvent): void;
-    private updateOrder;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridSortable, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridSortable, "[shGridSortable]", never, {}, {}, never, never, true, never>;
-}
-
 type AfterDropResponse = {
     fromIndex: number;
     toIndex: number;
 };
-declare class ShipSortable {
+type CrossDropResponse = {
+    previousContainer: ShipSortable;
+    currentContainer: ShipSortable;
+    previousIndex: number;
+    currentIndex: number;
+};
+type ShipDropEvent = {
+    previousContainer: ShipSortable;
+    container: ShipSortable;
+    previousIndex: number;
+    currentIndex: number;
+};
+interface SortableManagerConfig {
+    /**
+     * If provided, this hook is evaluated before the Signals are modified.
+     * Return `true`/`Observable<true>` to accept the drop, or false to reject.
+     */
+    onBeforeDrop?: (event: ShipDropEvent) => boolean | Promise<boolean> | Observable<boolean>;
+}
+declare function createSortableManager<T>(signals: WritableSignal<T[]> | Record<string, WritableSignal<T[]>>, config?: SortableManagerConfig): {
+    drop(event: ShipDropEvent): Promise<void>;
+};
+declare class ShipSortable implements OnInit, OnDestroy {
     #private;
-    dragStartIndex: _angular_core.WritableSignal<number>;
-    dragToIndex: _angular_core.WritableSignal<number>;
-    dragables: _angular_core.WritableSignal<HTMLElement[]>;
+    shSortable: _angular_core.InputSignal<any>;
+    sortableGroup: _angular_core.InputSignal<string | undefined>;
+    sortDrop: _angular_core.OutputEmitterRef<ShipDropEvent>;
     afterDrop: _angular_core.OutputEmitterRef<AfterDropResponse>;
+    crossDrop: _angular_core.OutputEmitterRef<CrossDropResponse>;
+    dragStartIndex: WritableSignal<number>;
+    dragToIndex: WritableSignal<number>;
+    initialPositions: WritableSignal<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }[]>;
+    dragables: WritableSignal<HTMLElement[]>;
+    static activeSource: ShipSortable | null;
+    static activeDraggedElement: HTMLElement | null;
+    static activeTarget: ShipSortable | null;
     abortController: AbortController | null;
     isDropping: boolean;
+    isCrossTarget: boolean;
     draggingEffect: _angular_core.EffectRef;
     draggablesEffect: _angular_core.EffectRef;
     getIndexOfElement(element: HTMLElement): number;
     dragStart(e: DragEvent): void;
     ngOnInit(): void;
+    dragEnter(e: DragEvent): void;
+    dragLeave(e: DragEvent): void;
     dragOver(e: DragEvent): void;
+    getVisualIndexOfElement(i: number): number;
     drop(): void;
     dragEnd(): void;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipSortable, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ShipSortable, "[shSortable]", never, {}, { "afterDrop": "afterDrop"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ShipSortable, "[shSortable]", never, { "shSortable": { "alias": "shSortable"; "required": false; "isSignal": true; }; "sortableGroup": { "alias": "sortableGroup"; "required": false; "isSignal": true; }; }, { "sortDrop": "sortDrop"; "afterDrop": "afterDrop"; "crossDrop": "crossDrop"; }, never, never, true, never>;
 }
-declare function moveIndex<T = any>(array: T[], event: AfterDropResponse): T[];
+declare function moveIndex<T = any>(array: T[], event: Pick<ShipDropEvent, 'previousIndex' | 'currentIndex'> | Pick<AfterDropResponse, 'fromIndex' | 'toIndex'>): T[];
+declare function transferArrayItem<T = any>(currentArray: T[], targetArray: T[], currentIndex: number, targetIndex: number): void;
 
 declare class ShipSpinner {
     color: _angular_core.InputSignal<ShipColor | null>;
@@ -1063,6 +1095,32 @@ declare class ShipTooltip implements OnDestroy {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ShipTooltip, "[shTooltip]", never, { "shTooltip": { "alias": "shTooltip"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+declare function hslToRgbExact(h: number, s: number, l: number): [number, number, number];
+declare function hsvToRgbExact(h: number, s: number, v: number): [number, number, number];
+declare function rgbToHsv(r: number, g: number, b: number): {
+    h: number;
+    s: number;
+    v: number;
+};
+declare function rgbToHex(r: number, g: number, b: number): string;
+declare function rgbaToHex8(r: number, g: number, b: number, a: number): string;
+declare function rgbToHsl(r: number, g: number, b: number): {
+    h: number;
+    s: number;
+    l: number;
+    string: string;
+};
+declare function rgbToOklch(r: number, g: number, b: number): {
+    l: number;
+    c: number;
+    h: number;
+};
+declare function hslToOklch(h: number, s: number, l: number): {
+    l: number;
+    c: number;
+    h: number;
+};
+
 declare const defaultThemeColors: Record<string, string>;
 declare const SHIP_CONFIG: InjectionToken<ShipConfig>;
 interface ShipComponentConfig {
@@ -1127,31 +1185,5 @@ interface ShipConfig {
     sidenavType?: 'overlay' | 'simple';
 }
 
-declare function hslToRgbExact(h: number, s: number, l: number): [number, number, number];
-declare function hsvToRgbExact(h: number, s: number, v: number): [number, number, number];
-declare function rgbToHsv(r: number, g: number, b: number): {
-    h: number;
-    s: number;
-    v: number;
-};
-declare function rgbToHex(r: number, g: number, b: number): string;
-declare function rgbaToHex8(r: number, g: number, b: number, a: number): string;
-declare function rgbToHsl(r: number, g: number, b: number): {
-    h: number;
-    s: number;
-    l: number;
-    string: string;
-};
-declare function rgbToOklch(r: number, g: number, b: number): {
-    l: number;
-    c: number;
-    h: number;
-};
-declare function hslToOklch(h: number, s: number, l: number): {
-    l: number;
-    c: number;
-    h: number;
-};
-
-export { GridSortable, SHIP_CONFIG, ShipAccordion, ShipAlert, ShipAlertContainer, ShipAlertModule, ShipAlertService, ShipBlueprint, ShipButton, ShipButtonGroup, ShipCard, ShipCheckbox, ShipChip, ShipColorPicker, ShipColorPickerInput, ShipDatepicker, ShipDatepickerInput, ShipDaterangeInput, ShipDialog, ShipDialogService, ShipDivider, ShipEventCard, ShipFileDragDrop, ShipFileUpload, ShipFormField, ShipFormFieldExperimental, ShipIcon, ShipInputMask, ShipList, ShipMenu, ShipPopover, ShipPreventWheel, ShipProgressBar, ShipRadio, ShipRangeSlider, ShipResize, ShipSelect, ShipSidenav, ShipSort, ShipSortable, ShipSpinner, ShipStepper, ShipStickyColumns, ShipTable, ShipTabs, ShipThemeToggle, ShipToggle, ShipToggleCard, ShipTooltip, ShipTooltipWrapper, ShipVirtualScroll, TEST_NODES, defaultThemeColors, hslToOklch, hslToRgbExact, hsvToRgbExact, moveIndex, rgbToHex, rgbToHsl, rgbToHsv, rgbToOklch, rgbaToHex8, watchHostClass };
-export type { AfterDropResponse, BlueprintNode, ComponentClosedType, ComponentDataType, Coordinates, Exact, ShipAlertItem, ShipAlertItemInternal, ShipAlertType, ShipButtonGroupVariant, ShipButtonSize, ShipCardVariant, ShipChipConfig, ShipColor, ShipComponentConfig, ShipConfig, ShipConfigColors, ShipConfigDistributions, ShipDialogInstance, ShipDialogOptions, ShipDialogServiceOptions, ShipDialogTemplateInstance, ShipFormFieldVariant, ShipIconSize, ShipPopoverOptions, ShipProgressBarMode, ShipRangeSliderConfig, ShipSheetVariant, ShipSidenavType, ShipSize, ShipTableVariant, ShipTypeVariant, ShipVariant };
+export { SHIP_CONFIG, ShipAccordion, ShipAlert, ShipAlertContainer, ShipAlertModule, ShipAlertService, ShipBlueprint, ShipButton, ShipButtonGroup, ShipCard, ShipCheckbox, ShipChip, ShipColorPicker, ShipColorPickerInput, ShipDatepicker, ShipDatepickerInput, ShipDaterangeInput, ShipDialog, ShipDialogService, ShipDivider, ShipEventCard, ShipFileDragDrop, ShipFileUpload, ShipFormField, ShipFormFieldExperimental, ShipIcon, ShipInputMask, ShipList, ShipMenu, ShipPopover, ShipPreventWheel, ShipProgressBar, ShipRadio, ShipRangeSlider, ShipResize, ShipSelect, ShipSidenav, ShipSort, ShipSortable, ShipSpinner, ShipStepper, ShipStickyColumns, ShipTable, ShipTabs, ShipThemeToggle, ShipToggle, ShipToggleCard, ShipTooltip, ShipTooltipWrapper, ShipVirtualScroll, TEST_NODES, createSortableManager, defaultThemeColors, hslToOklch, hslToRgbExact, hsvToRgbExact, moveIndex, rgbToHex, rgbToHsl, rgbToHsv, rgbToOklch, rgbaToHex8, transferArrayItem, watchHostClass };
+export type { AfterDropResponse, BlueprintNode, ComponentClosedType, ComponentDataType, Coordinates, CrossDropResponse, Exact, ShipAlertItem, ShipAlertItemInternal, ShipAlertType, ShipButtonGroupVariant, ShipButtonSize, ShipCardVariant, ShipChipConfig, ShipColor, ShipComponentConfig, ShipConfig, ShipConfigColors, ShipConfigDistributions, ShipDialogInstance, ShipDialogOptions, ShipDialogServiceOptions, ShipDialogTemplateInstance, ShipDropEvent, ShipFormFieldVariant, ShipIconSize, ShipPopoverOptions, ShipProgressBarMode, ShipRangeSliderConfig, ShipSheetVariant, ShipSidenavType, ShipSize, ShipTableVariant, ShipTypeVariant, ShipVariant, SortableManagerConfig };

package/bin/ship-fg-node

@@ -1,40 +0,0 @@
-#!/usr/bin/env node
-
-import { parseArgs } from 'util';
-import { main } from './src/ship-fg-node.js'; // Added .js extension for ESM imports
-
-const { values } = parseArgs({
-  args: process.argv, // Changed from Bun.argv to process.argv
-  options: {
-    src: {
-      type: 'string',
-    },
-    out: {
-      type: 'string',
-    },
-    rootPath: {
-      type: 'string',
-      default: '/',
-    },
-    watch: {
-      type: 'boolean',
-      default: false,
-    },
-    watchLib: {
-      type: 'boolean',
-      default: false,
-    },
-    verbose: {
-      type: 'boolean',
-      default: false,
-    },
-  },
-  allowPositionals: true,
-  strict: true,
-});
-
-if (values.src === undefined || values.out === undefined) {
-  throw new Error('src and out are both required arguments');
-}
-
-main(values);