@dineug/erd-editor 3.3.0 → 3.4.0

package/README.md

@@ -1,9 +1,31 @@
-# erd-editor
+# @dineug/erd-editor
 
-> Entity-Relationship Diagram Editor
+> Entity-Relationship Diagram Editor as a custom element
 
 ![erd-editor](https://github.com/dineug/erd-editor/blob/main/img/erd-editor-vscode.png?raw=true)
 
+`<erd-editor>` is a full database-schema editor in a single custom element. It has no
+framework dependency and renders into a closed shadow root, so it drops into any page —
+React, Vue, Svelte, or plain HTML — without leaking styles either way.
+
+This is the same editor that powers [erd-editor.io](https://erd-editor.io), the
+[VS Code extension](https://marketplace.visualstudio.com/items?itemName=dineug.vuerd-vscode)
+and the [IntelliJ plugin](https://plugins.jetbrains.com/plugin/23594-erd-editor).
+
+## Features
+
+- Visual schema design — tables, columns, memos, and four relationship cardinalities
+  (zero-one, zero-N, one-only, one-N)
+- Import — a `.sql` dump, a GraphQL SDL schema from any tool that emits one, a `.dbml` file, or
+  an `.aml` file
+- SQL DDL export — Databricks, MariaDB, MSSQL, MySQL, Oracle, PostgreSQL, Snowflake and SQLite
+- Code generation — TypeScript, GraphQL, C#, Java, JPA, Kotlin, Scala, Go,
+  SQLAlchemy, TypeORM, Sequelize, Drizzle, DBML, AML
+- Export — `.erd.json`, `.sql`, `.png`
+- Force-directed visualization of table relationships
+- Quick search, undo / redo, remappable keyboard shortcuts, and a built-in theme builder
+- Collaboration hooks — the editor emits and applies actions; you supply the transport
+
 ## Install
 
 ```sh
@@ -16,37 +38,195 @@ npm install @dineug/erd-editor
 import '@dineug/erd-editor';
 
 const editor = document.createElement('erd-editor');
+// the editor fills its container, and a custom element is inline by default
+Object.assign(editor.style, { display: 'block', width: '100%', height: '100vh' });
 document.body.appendChild(editor);
+
+// load a document without adding an undo entry, then keep it in sync
+editor.setInitialValue(localStorage.getItem('my-diagram') ?? '');
+editor.addEventListener('change', () => {
+  localStorage.setItem('my-diagram', editor.value);
+});
 ```
 
-### CDN
+`setInitialValue('')` starts an empty document.
+
+### Server-side rendering
+
+Importing the package registers the custom element at module scope, so it needs a DOM and
+throws in Node. In Next.js, Nuxt, SvelteKit or Astro, reach it from a client-only path:
+
+```js
+useEffect(() => {
+  import('@dineug/erd-editor');
+}, []);
+```
+
+### HTML
 
 ```html
+<erd-editor system-dark-mode enable-theme-builder></erd-editor>
 <script type="module">
-  import 'https://esm.run/@dineug/erd-editor';
+  import '@dineug/erd-editor';
 
-  const editor = document.createElement('erd-editor');
-  document.body.appendChild(editor);
+  const editor = document.querySelector('erd-editor');
 </script>
-<!-- or -->
-<script type="module" src="https://esm.run/@dineug/erd-editor"></script>
 ```
 
-### html
+```css
+erd-editor {
+  display: block;
+  width: 100%;
+  height: 100vh;
+}
+```
+
+### CDN
 
 ```html
-<erd-editor readonly system-dark-mode enable-theme-builder></erd-editor>
+<erd-editor style="display: block; width: 100%; height: 100vh"></erd-editor>
 <script type="module">
   import 'https://esm.run/@dineug/erd-editor';
-
-  const editor = document.querySelector('erd-editor');
 </script>
 ```
 
-## [Document](https://docs.erd-editor.io)
+## API
+
+### Attributes
+
+| Attribute | Property | Description |
+| --- | --- | --- |
+| `readonly` | `readonly` | Blocks editing and suppresses the `change` event. Assigning `value`, `setSchemaSQL()`, `setSchemaGraphQL()`, `setSchemaDBML()`, `setSchemaAML()` and `clear()` are ignored while it is set — load with `setInitialValue()` instead. Viewport actions and the SQL/code output settings still apply. |
+| `system-dark-mode` | `systemDarkMode` | Follows the OS color scheme |
+| `enable-theme-builder` | `enableThemeBuilder` | Shows the built-in theme builder |
+
+### Properties
+
+| Property | Description |
+| --- | --- |
+| `value: string` | The document as JSON — an `.erd.json` document ([schema](https://github.com/dineug/erd-editor/blob/main/json-schema/schema.json)). Assigning it loads the document as an edit, so it lands in the undo history; use `setInitialValue` to load without one. |
+
+### Methods
+
+| Method | Description |
+| --- | --- |
+| `setInitialValue(value: string)` | Load the initial document. Does not create a history entry. |
+| `getSchemaSQL(vendor?)` | Export DDL. `vendor` is one of `Databricks`, `MariaDB`, `MSSQL`, `MySQL`, `Oracle`, `PostgreSQL`, `Snowflake`, `SQLite`; omit it to use the document's own setting. |
+| `setSchemaSQL(value: string)` | Parse a DDL string and **replace** the current document with it. Lands in the undo history; an empty string is ignored. |
+| `setSchemaGraphQL(value: string)` | Parse a GraphQL SDL string and **replace** the current document with it. Object types become tables, scalars map to the document's own dialect, and relationships are read from the fields that point at another type. Lands in the undo history; an empty string is ignored. |
+| `setSchemaDBML(value: string)` | Parse a DBML string and **replace** the current document with it. Tables, columns, indexes and every `Ref` spelling are read; a `Project`, `TableGroup` or sticky `Note` is skipped, and text it cannot read loads an empty document rather than being refused. Lands in the undo history; an empty string is ignored. |
+| `setSchemaAML(value: string)` | Parse an [AML](https://azimutt.app) string and **replace** the current document with it. Entities, attributes, indexes and every relation arrow are read, in the v2 and the legacy v1 spelling; a check, a struct type and a view are skipped, and text it cannot read loads an empty document rather than being refused. Lands in the undo history; an empty string is ignored. |
+| `setDiffValue(value: string)` | Open the diff viewer against another document. |
+| `setPresetTheme(options)` | Set `appearance`, `grayColor` and `accentColor`. |
+| `setTheme(theme)` | Override individual theme tokens. |
+| `setKeyBindingMap(map)` | Remap shortcuts. `edit`, `stop`, `search`, `undo`, `redo`, `zoomIn` and `zoomOut` are reserved. |
+| `getSharedStore(config?)` | Returns `{ subscribe, dispatch, dispatchSync, connection, disconnect, destroy }`. `subscribe` gives you this editor's actions to relay; `dispatch` applies a peer's. You supply the transport. `config` is `{ getNickname?, mouseTracker?, focusTracker? }`; both trackers default to `true` and broadcast this editor's cursor and table focus to peers. |
+| `focus()` / `blur()` | Move focus in and out of the editor. |
+| `clear()` | Empty the document. |
+| `destroy()` | Tear the editor down and release its listeners, subscriptions and shared stores. |
+
+### Events
+
+| Event | Description |
+| --- | --- |
+| `change` | The document changed. Debounced, and never fired while `readonly`. Read `editor.value`. |
+| `changePresetTheme` | The theme was changed from inside the editor. `event.detail` carries the new options. |
+
+## Syntax highlighting
+
+The SQL and code-generation panels render as plain text unless a highlighter is supplied.
+[`@dineug/erd-editor-shiki-worker`](https://www.npmjs.com/package/@dineug/erd-editor-shiki-worker)
+runs one in a shared worker. It is a separate install:
+
+```sh
+npm install @dineug/erd-editor-shiki-worker
+```
 
-- [Web App](https://erd-editor.io)
-- [VSCode Extension](https://marketplace.visualstudio.com/items?itemName=dineug.vuerd-vscode)
-- [IntelliJ Plugin](https://plugins.jetbrains.com/plugin/23594-erd-editor)
+```js
+import { setGetShikiServiceCallback } from '@dineug/erd-editor';
+
+// deferred, so the highlighter never lands in your main chunk
+import('@dineug/erd-editor-shiki-worker').then(({ getShikiService }) => {
+  setGetShikiServiceCallback(getShikiService);
+});
+```
+
+## File dialogs
+
+Import and export go through injectable callbacks, so a host without a browser file dialog —
+an IDE webview, for example — can supply its own. The two are not symmetric: export hands you
+the finished file, while import only asks for one, and you push the content back in yourself.
+
+```js
+import { setExportFileCallback, setImportFileCallback } from '@dineug/erd-editor';
+
+setExportFileCallback((blob, { fileName }) => host.writeFile(fileName, blob));
+
+setImportFileCallback(async ({ type, op, accept }) => {
+  const text = await host.pickFile(accept);
+
+  if (op === 'diff') {
+    editor.setDiffValue(text);
+  } else if (type === 'json') {
+    editor.value = text;
+  } else if (type === 'sql') {
+    editor.setSchemaSQL(text);
+  } else if (type === 'graphql') {
+    editor.setSchemaGraphQL(text);
+  } else if (type === 'dbml') {
+    editor.setSchemaDBML(text);
+  } else if (type === 'aml') {
+    editor.setSchemaAML(text);
+  }
+});
+```
+
+Dispatch on every `type` you handle and ignore the rest. Assigning `value` clears the
+document before it parses, so routing a payload there that is not an `.erd.json` document —
+through a catch-all `else`, or because a `type` added later fell through — empties the
+diagram instead of importing anything. `accept` carries the extensions for that type
+(`.json`, `.sql`, or `.graphql,.gql,.graphqls`), ready to hand to a host file dialog.
+
+Left unset, the editor uses the browser's own download and file-picker behavior.
+
+## Headless replica
+
+A second entry point runs the document store with no DOM, for hosts that need to apply an
+action stream and serialize the result off the main thread:
+
+```js
+import { createReplicationStore } from '@dineug/erd-editor/engine.js';
+
+// `toWidth` measures text for layout — a worker has no DOM, so you supply it
+const store = createReplicationStore({ toWidth });
+
+store.setInitialValue(savedJson);
+store.on({ change: () => persist(store.value) });
+store.dispatch(actions); // actions relayed from a live editor's shared store
+```
+
+## Development
+
+This package is the editor core of the [erd-editor monorepo](https://github.com/dineug/erd-editor);
+work on it from a workspace checkout.
+
+```sh
+pnpm --filter @dineug/erd-editor dev            # builds workspace deps, then a dev server
+pnpm --filter @dineug/erd-editor dev:storybook  # component playground
+pnpm exec vp run --filter @dineug/erd-editor --fail-if-no-match test
+pnpm --filter @dineug/erd-editor e2e            # Playwright
+```
+
+## Documentation
+
+- [Documentation](https://docs.erd-editor.io)
 - [Editing Guide](https://docs.erd-editor.io/docs/category/guides)
-- [API](https://docs.erd-editor.io/docs/api/erd-editor-element)
+- [Element API](https://docs.erd-editor.io/docs/api/erd-editor-element)
+
+## Issues
+
+Found a bug or want a feature? [Open an issue](https://github.com/dineug/erd-editor/issues).
+
+## License
+
+[MIT](https://github.com/dineug/erd-editor/blob/main/LICENSE) © SeungHwan-Lee

package/dist/components/erd/canvas/altDragDuplicate.d.ts

@@ -0,0 +1,3 @@
+import { AppContext } from '../../appContext';
+import { SelectType } from '../../../engine/modules/editor/state';
+export declare function tryStartAltDragDuplicate(app: AppContext, event: MouseEvent | TouchEvent, entityId: string, selectType: SelectType): boolean;

package/dist/components/erd/canvas/duplicate-ghost/DuplicateGhost.d.ts

@@ -0,0 +1,4 @@
+import { FC } from '@dineug/r-html';
+export type DuplicateGhostProps = {};
+declare const DuplicateGhost: FC<DuplicateGhostProps>;
+export default DuplicateGhost;

package/dist/components/erd/canvas/duplicate-ghost/DuplicateGhost.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const ghostLayer: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const ghostItem: import('@dineug/r-html').CSSTemplateLiterals;

package/dist/components/erd/canvas/shared-drag-select/SharedDragSelect.d.ts

@@ -0,0 +1,4 @@
+import { FC } from '@dineug/r-html';
+export type SharedDragSelectProps = {};
+declare const SharedDragSelect: FC<SharedDragSelectProps>;
+export default SharedDragSelect;

package/dist/components/erd/canvas/table/column/Column.d.ts

@@ -16,6 +16,13 @@ export type ColumnProps = {
     focusComment: boolean;
     focusUnique: boolean;
     focusAutoIncrement: boolean;
+    sharedFocusName: string | null;
+    sharedFocusDataType: string | null;
+    sharedFocusNotNull: string | null;
+    sharedFocusDefault: string | null;
+    sharedFocusComment: string | null;
+    sharedFocusUnique: string | null;
+    sharedFocusAutoIncrement: string | null;
     editName: boolean;
     editDataType: boolean;
     editDefault: boolean;

package/dist/components/erd/canvas/table/column/column-data-type/ColumnDataType.d.ts

@@ -1,11 +1,11 @@
 import { FC, Ref } from '@dineug/r-html';
 import { AppContext } from '../../../../../appContext';
 export type ColumnDataTypeProps = {
-    app: Ref<AppContext>;
+    app?: Ref<AppContext>;
     tableId: string;
     columnId: string;
-    edit: boolean;
-    focus: boolean;
+    edit?: boolean;
+    focus?: boolean;
     width: number;
     value: string;
     onInput?: (event: InputEvent) => void;

package/dist/components/erd/canvas/table/column/column-not-null/ColumnNotNull.d.ts

@@ -1,6 +1,6 @@
 import { FC } from '@dineug/r-html';
 export type ColumnNotNullProps = {
-    focus: boolean;
+    focus?: boolean;
     options: number;
 };
 declare const ColumnNotNull: FC<ColumnNotNullProps>;

package/dist/components/erd/canvas/table/column/column-option/ColumnOption.d.ts

@@ -1,7 +1,7 @@
 import { FC } from '@dineug/r-html';
 export type ColumnOptionProps = {
     class?: any;
-    focus: boolean;
+    focus?: boolean;
     width: number;
     checked: boolean;
     text: string;

package/dist/components/erd/canvas/table/useSharedFocusTable.d.ts

@@ -0,0 +1,6 @@
+import { FocusType } from '../../../../engine/modules/editor/state';
+import { Ctx } from '../../../../internal-types';
+export declare function useSharedFocusTable(ctx: Ctx, tableId: string): {
+    sharedFocusTableColor: () => string | null;
+    sharedFocusColor: (focusType: FocusType, columnId?: string) => string | null;
+};

package/dist/components/erd/canvas/useSharedSelectEntity.d.ts

@@ -0,0 +1,4 @@
+import { Ctx } from '../../../internal-types';
+export declare function useSharedSelectEntity(ctx: Ctx, entityId: string): {
+    sharedSelectColor: () => string | null;
+};

package/dist/components/erd/erd-context-menu/menus/drawRelationshipMenus.d.ts

@@ -1,14 +1,15 @@
 import { AppContext } from '../../../appContext';
+import { Base64IconName } from '../../../primitives/icon/icons';
 import { KeyBindingName } from '../../../../utils/keyboard-shortcut';
 type Menu = {
-    iconName: string;
+    iconName: Base64IconName;
     name: string;
     keyBindingName: KeyBindingName;
     relationshipType: number;
 };
 export declare const menus: Menu[];
 export declare function createDrawRelationshipMenus({ store, keyBindingMap }: AppContext, onClose: () => void): {
-    iconName: string;
+    iconName: "ZeroOneN" | "ZeroOne" | "ZeroN" | "OneOnly" | "OneN" | "One" | "N";
     name: string;
     shortcut: string;
     onClick: () => void;

package/dist/components/erd/erd-context-menu/menus/exportMenus.d.ts

@@ -1,9 +1,9 @@
 import { AppContext } from '../../../appContext';
-export declare function createExportMenus(app: AppContext, onClose: () => void, root: HTMLElement): {
-    icon: {
-        prefix: string;
-        name: string;
-    };
+import { IconName } from '../../../primitives/icon/icons';
+type Menu = {
+    icon: IconName;
     name: string;
     onClick: () => void;
-}[];
+};
+export declare function createExportMenus(app: AppContext, onClose: () => void, root: HTMLElement): Menu[];
+export {};

package/dist/components/erd/erd-context-menu/menus/importMenus.d.ts

@@ -1,9 +1,9 @@
 import { AppContext } from '../../../appContext';
-export declare function createImportMenus(app: AppContext, onClose: () => void): {
-    icon: {
-        prefix: string;
-        name: string;
-    };
+import { IconName } from '../../../primitives/icon/icons';
+type Menu = {
+    icon: IconName;
     name: string;
     onClick: () => void;
-}[];
+};
+export declare function createImportMenus(app: AppContext, onClose: () => void): Menu[];
+export {};

package/dist/components/erd/erd-context-menu/menus/relationshipMenus.d.ts

@@ -1,7 +1,7 @@
 import { AppContext } from '../../../appContext';
 export declare function createRelationshipMenus({ store }: AppContext, relationshipId?: string): {
     checked: boolean;
-    iconName: string;
+    iconName: "ZeroOneN" | "ZeroOne" | "ZeroN" | "OneOnly" | "OneN" | "One" | "N";
     name: string;
     onClick: () => void;
 }[];

package/dist/components/erd/table-properties/table-properties-indexes/indexes-checkbox-column/IndexesCheckboxColumn.d.ts

@@ -2,7 +2,7 @@ import { FC } from '@dineug/r-html';
 import { Index } from '../../../../../internal-types';
 export type IndexesCheckboxColumnProps = {
     tableId: string;
-    index: Index;
+    index: Index | null;
 };
 declare const IndexesCheckboxColumn: FC<IndexesCheckboxColumnProps>;
 export default IndexesCheckboxColumn;

package/dist/components/erd-editor/ErdEditor.d.ts

@@ -24,9 +24,13 @@ export interface ErdEditorElement extends ErdEditorProps, HTMLElement {
     setTheme: (theme: Partial<ThemeType>) => void;
     setKeyBindingMap: (keyBindingMap: Partial<Omit<KeyBindingMap, typeof KeyBindingName.edit | typeof KeyBindingName.stop | typeof KeyBindingName.search | typeof KeyBindingName.undo | typeof KeyBindingName.redo | typeof KeyBindingName.zoomIn | typeof KeyBindingName.zoomOut>>) => void;
     setSchemaSQL: (value: string) => void;
+    setSchemaGraphQL: (value: string) => void;
+    setSchemaDBML: (value: string) => void;
+    setSchemaAML: (value: string) => void;
     getSchemaSQL: (databaseVendor?: DatabaseVendor) => string;
     getSharedStore: (config?: SharedStoreConfig & {
         mouseTracker?: boolean;
+        focusTracker?: boolean;
     }) => SharedStore;
     setDiffValue: (value: string) => void;
 }

package/dist/components/erd-editor/ErdEditor.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/html';
+import { StoryObj } from '@storybook/html-vite';
 import { ErdEditorProps } from './ErdEditor';
 declare const meta: {
     title: string;

package/dist/components/global-styles/GlobalStyles.d.ts

@@ -1,4 +1,18 @@
 import { FC } from '@dineug/r-html';
 export type GlobalStylesProps = {};
+/**
+ * Renders nothing, and stays anyway.
+ *
+ * Every sheet it used to be responsible for is an adopted global literal now, so there is no
+ * markup left to emit. What is left is the `setGlobalStyleOrder` call above, which is a module
+ * side effect — it only runs if something imports this module, and the bucket order is the one
+ * thing in the style layer with no test-visible symptom until the cascade is already wrong.
+ *
+ * Being a component is what makes that import load-bearing on its face. `ErdEditor` renders
+ * `<${GlobalStyles} />`, which no bundler will drop and no `no-unused-imports` pass will offer to
+ * delete; a bare `import '@/components/global-styles/GlobalStyles'` in its place would be a naked
+ * side-effect import that `simple-import-sort` is free to move and a future cleanup is free to
+ * mistake for dead weight. The empty render is the cheaper half of that trade.
+ */
 declare const GlobalStyles: FC<GlobalStylesProps>;
 export default GlobalStyles;

package/dist/components/primitives/button/Button.stories.d.ts

@@ -1,19 +1,19 @@
-import { StoryObj } from '@storybook/html';
+import { StoryObj } from '@storybook/html-vite';
 import { ButtonProps } from './Button';
 declare const meta: {
     title: string;
     render: (args: ButtonProps) => DocumentFragment;
     argTypes: {
         size: {
-            control: string;
+            control: "radio";
             options: string[];
         };
         variant: {
-            control: string;
+            control: "radio";
             options: string[];
         };
         text: {
-            control: string;
+            control: "text";
         };
         onClick: {
             action: string;

package/dist/components/primitives/code-block/CodeBlock.stories.d.ts

@@ -1,18 +1,18 @@
-import { StoryObj } from '@storybook/html';
+import { StoryObj } from '@storybook/html-vite';
 import { CodeBlockProps } from './CodeBlock';
 declare const meta: {
     title: string;
     render: (args: CodeBlockProps) => DocumentFragment;
     argTypes: {
         value: {
-            control: string;
+            control: "text";
         };
         lang: {
-            control: string;
+            control: "select";
             options: string[];
         };
         theme: {
-            control: string;
+            control: "radio";
             options: string[];
         };
         onCopy: {

package/dist/components/primitives/code-block/CodeBlock.styles.d.ts

@@ -1,3 +1,8 @@
 export declare const clipboard: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
-export declare const code: import('@dineug/r-html').CSSTemplateLiterals;
+/** Out of flow, the root loses its content height and collapses to `min-height`. */
+export declare const scroller: import('@dineug/r-html').CSSTemplateLiterals;
+/** Sized by the preview, so the overlay stretched onto it has no scroll of its own to desync. */
+export declare const layers: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const preview: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const textarea: import('@dineug/r-html').CSSTemplateLiterals;

package/dist/components/primitives/color-picker/ColorPicker.d.ts

@@ -4,7 +4,7 @@ export type ColorPickerProps = {
     x: number;
     y: number;
     color: string;
-    viewport?: Viewport;
+    viewport?: Viewport | null;
     onChange?: (color: string) => void;
     onLastUpdate?: (color: string) => void;
 };

package/dist/components/primitives/color-picker/ColorPicker.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/html';
+import { StoryObj } from '@storybook/html-vite';
 import { ColorPickerProps } from './ColorPicker';
 declare const meta: {
     title: string;

package/dist/components/primitives/context-menu/ContextMenu.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/html';
+import { StoryObj } from '@storybook/html-vite';
 type ContextMenuTemplateProps = {
     onClick?: (event: MouseEvent) => void;
 };

package/dist/components/primitives/context-menu/context-menu-item/ContextMenuItem.d.ts

@@ -1,6 +1,6 @@
 import { DOMTemplateLiterals, FC } from '@dineug/r-html';
 export type ContextMenuItemProps = {
-    children?: DOMTemplateLiterals;
+    children?: DOMTemplateLiterals | string;
     subChildren?: DOMTemplateLiterals;
     onClick?: (event: MouseEvent) => void;
 };

package/dist/components/primitives/context-menu/menu/Menu.d.ts

@@ -1,8 +1,8 @@
 import { DOMTemplateLiterals, FC } from '@dineug/r-html';
 export type MenuProps = {
-    icon: DOMTemplateLiterals | string;
+    icon?: DOMTemplateLiterals | string | null;
     name: DOMTemplateLiterals | string;
-    right?: DOMTemplateLiterals | string;
+    right?: DOMTemplateLiterals | string | null;
 };
 declare const Menu: FC<MenuProps>;
 export default Menu;

package/dist/components/primitives/edit-input/EditInput.d.ts

@@ -3,8 +3,8 @@ export type EditInputProps = {
     class?: any;
     placeholder?: string;
     title?: string;
-    edit: boolean;
-    focus: boolean;
+    edit?: boolean;
+    focus?: boolean;
     width: number;
     value: string;
     autofocus?: boolean;

package/dist/components/primitives/edit-input/EditInput.stories.d.ts

@@ -1,23 +1,23 @@
-import { StoryObj } from '@storybook/html';
+import { StoryObj } from '@storybook/html-vite';
 import { EditInputProps } from './EditInput';
 declare const meta: {
     title: string;
     render: (args: EditInputProps) => DocumentFragment;
     argTypes: {
         placeholder: {
-            control: string;
+            control: "text";
         };
         edit: {
-            control: string;
+            control: "boolean";
         };
         focus: {
-            control: string;
+            control: "boolean";
         };
         width: {
-            control: string;
+            control: "number";
         };
         value: {
-            control: string;
+            control: "text";
         };
         onInput: {
             action: string;

package/dist/components/primitives/highlighted-text/HighlightedText.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/html';
+import { StoryObj } from '@storybook/html-vite';
 import { HighlightedTextProps } from './HighlightedText';
 declare const meta: {
     title: string;

package/dist/components/primitives/icon/Icon.d.ts

@@ -1,10 +1,9 @@
 import { FC } from '@dineug/r-html';
+import { IconName } from './icons';
 export type IconProps = {
     class?: any;
-    prefix?: string;
-    name: string;
+    name: IconName;
     size?: number;
-    color?: string;
     useTransition?: boolean;
     title?: string;
     rotate?: number;

package/dist/components/primitives/icon/Icon.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/html';
+import { StoryObj } from '@storybook/html-vite';
 import { IconProps } from './Icon';
 declare const meta: {
     title: string;
@@ -6,3 +6,5 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<IconProps>;
 export declare const Icons: Story;
+export declare const RelationshipNotation: Story;
+export declare const Sizes: Story;