@dforge-core/diagram 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 dForge
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,45 @@
+# @dforge-core/diagram
+
+Entity-relationship and workspace diagram components for [dForge](https://github.com/iash44/dForge-core) models. A standalone Svelte 5 library — it has **no dForge runtime dependencies** (no SDK, no UI kit), so it can be embedded anywhere, including editor extensions.
+
+## Install
+
+```bash
+npm install @dforge-core/diagram
+```
+
+Svelte 5 is a peer dependency:
+
+```bash
+npm install svelte@^5
+```
+
+### Styling (soft dependency)
+
+Components render [Bootstrap Icons](https://icons.getbootstrap.com/) glyphs (`bi-*`) and theme via Bootstrap CSS variables (`--bs-body-color`, `--bs-tertiary-bg`, etc.). To match the dForge look, load Bootstrap Icons and a Bootstrap-compatible CSS-variable theme in the host app, or define those variables yourself.
+
+## Usage
+
+```svelte
+<script>
+	import { SimpleDiagram, buildGraph } from '@dforge-core/diagram';
+
+	// `model` is a metadata.getModel response (ModelGetResponse)
+	const graph = buildGraph(model);
+</script>
+
+<SimpleDiagram {graph} />
+```
+
+## Exports
+
+- **Components**: `SimpleDiagram`, `ModelDiagram`, `EntityNode`, `DiagramDebug`, `WorkspaceMap`, `ModuleCard`
+- **Graph building**: `buildGraph`, `buildEntityMap`, `buildWorkspaceGraph`, `getModuleColor`, `MODULE_COLORS`
+- **Layout & routing**: `simpleLayout`, `moduleLayout`, `routeEdge`, `routeAllEdges`, `computeEdgePath`, geometry helpers
+- **Pan/zoom**: `createPanZoom`, `createLocalStorageSync`
+- **i18n**: `setDiagramTranslations`, `getDiagramTranslations`, `DIAGRAM_TRANSLATIONS_EN`
+- **Types**: diagram types plus the metadata model contract (`ModelGetResponse`, `ModelModule`, `ModelEntity`, `ModelConstraint`, `ModelColumn`) — structurally compatible with the dForge API response shape
+
+## License
+
+[MIT](./LICENSE)

package/dist/EntityNode.svelte

@@ -0,0 +1,167 @@
+<script lang="ts">
+	import type { ModelColumn } from './model-types';
+	import type { EntityNodeData } from './diagram-types';
+	import { getDiagramTranslations } from './i18n';
+
+	let { data }: { data: EntityNodeData } = $props();
+
+	const t = getDiagramTranslations();
+	const label = $derived(data.resLabel || data.entityCd);
+
+	function getColumnTypeLabel(col: ModelColumn): string {
+		if (col.columnType === 'F') return t.col_type_formula;
+		if (col.columnType === 'R') {
+			const target = col.refEntityId ? data.entityMap.get(col.refEntityId) : null;
+			return target ? `→ ${target}` : `→ ${t.col_type_ref}`;
+		}
+		if (col.columnType === 'S') return `← ${t.col_type_set}`;
+		return col.fieldTypeCd || col.baseDatatypeCd;
+	}
+</script>
+
+<div class="entity-node" style:--module-color={data.moduleColor}>
+	<div class="entity-header">
+		{#if data.resIcon}
+			<i class={data.resIcon}></i>
+		{/if}
+		<span class="entity-title">{label}</span>
+		<span class="entity-module">{data.moduleCd}</span>
+	</div>
+
+	<div class="entity-columns">
+		{#each data.columns as col (col.columnCd)}
+			<div
+				class="entity-col-row"
+				class:pk-row={col.isPk}
+				class:fk-row={col.columnType === 'R'}
+				class:formula-row={col.columnType === 'F'}
+				class:set-row={col.columnType === 'S'}
+			>
+				<span class="col-indicators">
+					{#if col.isPk}<span class="col-badge pk">PK</span>{/if}
+					{#if col.columnType === 'F'}<span class="col-badge formula">F</span>{/if}
+					{#if col.columnType === 'S'}<span class="col-badge set">S</span>{/if}
+				</span>
+				<span class="col-name">{col.resLabel || col.columnCd}</span>
+				<span class="col-type">{getColumnTypeLabel(col)}</span>
+			</div>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.entity-node {
+		background: var(--bs-body-bg, #fff);
+		border: 2px solid var(--module-color, #6c757d);
+		border-radius: 6px;
+		min-width: 220px;
+		max-width: 320px;
+		font-size: 0.75rem;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+		user-select: none;
+	}
+
+	.entity-header {
+		display: flex;
+		align-items: center;
+		gap: 0.35rem;
+		padding: 0.35rem 0.5rem;
+		background: var(--module-color, #6c757d);
+		color: #fff;
+		border-radius: 3px 3px 0 0;
+		font-weight: 600;
+		font-size: 0.8rem;
+	}
+
+	.entity-title {
+		flex: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.entity-module {
+		font-size: 0.65rem;
+		opacity: 0.8;
+		font-weight: 400;
+	}
+
+	.entity-columns {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.entity-col-row {
+		display: flex;
+		align-items: center;
+		gap: 0.3rem;
+		padding: 0.15rem 0.5rem;
+		border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.08));
+		position: relative;
+	}
+
+	.entity-col-row:last-child {
+		border-bottom: none;
+	}
+
+	.entity-col-row.pk-row {
+		background-color: rgba(var(--module-color-rgb, 108, 117, 125), 0.06);
+		font-weight: 600;
+	}
+
+	.entity-col-row.fk-row {
+		color: var(--bs-info, #0dcaf0);
+	}
+
+	.entity-col-row.formula-row {
+		font-style: italic;
+		opacity: 0.85;
+	}
+
+	.entity-col-row.set-row {
+		opacity: 0.7;
+	}
+
+	.col-indicators {
+		display: flex;
+		gap: 0.15rem;
+		flex-shrink: 0;
+	}
+
+	.col-badge {
+		font-size: 0.55rem;
+		font-weight: 700;
+		padding: 0 0.2rem;
+		border-radius: 2px;
+		line-height: 1.3;
+		text-transform: uppercase;
+	}
+
+	.col-badge.pk {
+		background: var(--module-color, #6c757d);
+		color: #fff;
+	}
+
+	.col-badge.formula {
+		background: var(--bs-warning-bg-subtle, #fff3cd);
+		color: var(--bs-warning-text-emphasis, #664d03);
+	}
+
+	.col-badge.set {
+		background: var(--bs-secondary-bg-subtle, #e2e3e5);
+		color: var(--bs-secondary-text-emphasis, #41464b);
+	}
+
+	.col-name {
+		flex: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.col-type {
+		flex-shrink: 0;
+		color: var(--bs-secondary-color, #6c757d);
+		font-size: 0.65rem;
+	}
+</style>

package/dist/EntityNode.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { EntityNodeData } from './diagram-types';
+type $$ComponentProps = {
+    data: EntityNodeData;
+};
+declare const EntityNode: import("svelte").Component<$$ComponentProps, {}, "">;
+type EntityNode = ReturnType<typeof EntityNode>;
+export default EntityNode;
+//# sourceMappingURL=EntityNode.svelte.d.ts.map

package/dist/EntityNode.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EntityNode.svelte.d.ts","sourceRoot":"","sources":["../src/lib/EntityNode.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGrD,KAAK,gBAAgB,GAAI;IAAE,IAAI,EAAE,cAAc,CAAA;CAAE,CAAC;AAkDnD,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/IconButton.svelte

@@ -0,0 +1,83 @@
+<!--
+	Self-contained icon button used by the diagram toolbars.
+
+	Deliberately minimal (and independent of `@dforge/ui`) so this package
+	can be published standalone. Renders a Bootstrap Icons glyph, so the
+	consuming app must load the `bootstrap-icons` font/CSS; colors come from
+	Bootstrap CSS variables (`--bs-*`) for theme consistency.
+-->
+<script lang="ts">
+	interface Props {
+		/** Bootstrap Icons class name, e.g. `bi-plus-lg`. */
+		icon: string;
+		title: string;
+		onclick?: (e: MouseEvent) => void;
+		disabled?: boolean;
+		size?: 'sm' | 'md' | 'lg';
+		class?: string;
+	}
+
+	let {
+		icon,
+		title,
+		onclick,
+		disabled = false,
+		size = 'sm',
+		class: cls = '',
+	}: Props = $props();
+</script>
+
+<button
+	type="button"
+	class="icon-btn icon-btn-{size} {cls}"
+	{title}
+	aria-label={title}
+	{onclick}
+	{disabled}
+>
+	<i class="bi {icon}"></i>
+</button>
+
+<style>
+	.icon-btn {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0;
+		border: none;
+		background: none;
+		cursor: pointer;
+		color: var(--bs-secondary-color);
+		border-radius: 4px;
+		line-height: 1;
+		text-decoration: none;
+	}
+	.icon-btn:hover {
+		background: var(--bs-tertiary-bg);
+		color: var(--bs-body-color);
+	}
+	.icon-btn:disabled {
+		opacity: 0.4;
+		cursor: default;
+		background: none;
+		color: var(--bs-secondary-color);
+	}
+
+	/* Size tiers */
+	.icon-btn-sm {
+		width: 18px;
+		height: 18px;
+		font-size: 0.85em;
+	}
+	.icon-btn-md {
+		width: 1.5rem;
+		height: 1.5rem;
+		font-size: 1rem;
+	}
+	.icon-btn-lg {
+		width: 1.75rem;
+		height: 1.75rem;
+		font-size: 1.125rem;
+	}
+</style>

package/dist/IconButton.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    /** Bootstrap Icons class name, e.g. `bi-plus-lg`. */
+    icon: string;
+    title: string;
+    onclick?: (e: MouseEvent) => void;
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+}
+declare const IconButton: import("svelte").Component<Props, {}, "">;
+type IconButton = ReturnType<typeof IconButton>;
+export default IconButton;
+//# sourceMappingURL=IconButton.svelte.d.ts.map

package/dist/IconButton.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.svelte.d.ts","sourceRoot":"","sources":["../src/lib/IconButton.svelte.ts"],"names":[],"mappings":"AAGC,UAAU,KAAK;IACd,qDAAqD;IACrD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAuBF,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}