@aham.ro/ui-designer 0.1.3

package/README.md

@@ -0,0 +1,28 @@
+# IAM Designer
+
+Vue 3 components for the Aham IAM designer.
+
+## Installation
+
+```bash
+npm install @aham.ro/iam-designer
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Designer } from '@aham.ro/iam-designer'
+</script>
+
+<template>
+  <Designer value="" />
+</template>
+```
+
+## Development
+
+```bash
+npm install
+npm run build
+```

package/dist/Designer.vue.d.ts

@@ -0,0 +1,22 @@
+import type { MoreMenuItem } from './widgets/header/types';
+interface Options {
+    subject: string;
+    shared?: boolean;
+    theme?: {
+        changeable: boolean;
+        color?: string;
+    };
+    size?: 'small' | 'medium' | 'large';
+    moreItems?: MoreMenuItem[];
+}
+type __VLS_Props = {
+    value: string;
+    options?: Options;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    moreSelect: (id: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onMoreSelect?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/composables/useTranslation.d.ts

@@ -0,0 +1 @@
+export declare function useTranslation(): (key: string, fallback: string) => string;

package/dist/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>

package/dist/iam-designer.css

@@ -0,0 +1,2 @@
+@import "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,0..200";.iam-designer{--designer-panel:var(--color-panel,#fff);--designer-panel-raised:var(--color-panel-raised,#f5f2ee);--designer-text:var(--color-text,#111);--designer-muted:var(--color-text-muted,#6b7280);--designer-border:var(--color-border,#ece9e4);--designer-primary:var(--color-primary,#2563eb);--designer-space-xs:var(--space-xs,6px);--designer-space-sm:var(--space-sm,10px);--designer-space-md:var(--space-md,14px);--designer-font-xs:var(--font-xs,11px);--designer-font-sm:var(--font-sm,12.5px);--designer-font-lg:var(--font-lg,19px)}.icon-button[data-v-b3b6390f]{border:1px solid var(--color-border,#ece9e4);border-radius:var(--radius-sm,10px);background-color:var(--color-panel,#fff);width:34px;height:34px;color:var(--color-text-muted,#6b7280);font:inherit;cursor:pointer;justify-content:center;align-items:center;padding:0;line-height:1;transition:color .15s,border-color .15s,background-color .15s;display:inline-flex}.icon-button[data-v-b3b6390f]:hover:not(:disabled){color:var(--color-primary,#2563eb);border-color:var(--color-primary,#2563eb);background-color:var(--color-panel-raised,#f5f2ee)}.icon-button[data-v-b3b6390f]:disabled{opacity:.5;cursor:not-allowed}.more-menu[data-v-923fea1e]{position:relative}.more-button[data-v-923fea1e]{border-radius:var(--radius-xs,6px);background-color:var(--color-panel,#fff);width:32px;height:32px;color:var(--color-text,#111);font:inherit;cursor:pointer;border:none;justify-content:center;align-items:center;margin:0;padding:0;line-height:1;display:inline-flex}.more-button[aria-expanded=true][data-v-923fea1e]{background-color:var(--color-panel-raised,#f5f2ee)}.dropdown[data-v-923fea1e]{z-index:1000;border:1px solid var(--designer-border,#ece9e4);border-radius:var(--radius-sm,10px);background:var(--designer-panel,#fff);min-width:180px;color:var(--designer-text,#111);font-family:var(--font-base-family,system-ui, sans-serif);padding:4px;position:fixed;box-shadow:0 8px 24px #0000001f}.dropdown .icon[data-v-923fea1e]{letter-spacing:normal;text-transform:none;white-space:nowrap;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;font-feature-settings:"liga";font-variation-settings:"FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;direction:ltr;font-family:Material Symbols Outlined;font-size:20px;font-style:normal;font-weight:400;line-height:1}.menu-item[data-v-923fea1e]{align-items:center;gap:var(--designer-space-sm,10px);border-radius:var(--radius-xs,6px);width:100%;color:var(--designer-text,#111);font:inherit;font-size:var(--designer-font-sm,12.5px);text-align:left;cursor:pointer;background:0 0;border:0;padding:8px 10px;display:flex}.menu-item[data-v-923fea1e]:hover:not(:disabled){background:var(--designer-panel-raised,#f5f2ee)}.menu-item[data-v-923fea1e]:disabled{opacity:.5;cursor:not-allowed}.save-button[data-v-4a359870]{justify-content:center;align-items:center;gap:var(--space-xs,6px);min-height:32px;padding:6px var(--space-sm,10px);border:1px solid var(--color-primary,#2563eb);border-radius:var(--radius-sm,10px);background-color:var(--color-primary,#2563eb);color:var(--color-on-primary,#fff);font:inherit;font-size:var(--font-sm,12.5px);cursor:pointer;font-weight:500;display:inline-flex}.save-button[data-v-4a359870]:disabled{opacity:.6;cursor:not-allowed}.save-button[data-v-4a359870]:hover{background-color:var(--color-primary-hover,#1d4ed8);border-color:var(--color-primary-hover,#1d4ed8)}.spinner[data-v-4a359870]{border:1px solid;border-right-color:#0000;border-radius:50%;width:14px;height:14px;animation:.75s linear infinite save-button-spin-4a359870}@keyframes save-button-spin-4a359870{to{transform:rotate(360deg)}}header[data-v-b6ce5e30]{box-sizing:border-box;width:100%;height:60px;color:var(--designer-text);border-bottom:1px solid var(--designer-border);font-family:var(--font-base-family,inherit);align-items:center;display:flex}.branding[data-v-b6ce5e30]{height:100%;padding:0 var(--designer-space-md);align-items:center;min-width:0;display:flex}.branding .icon[data-v-b6ce5e30]{margin-right:var(--designer-space-xs);font-size:24px}.branding .title[data-v-b6ce5e30]{text-overflow:ellipsis;white-space:nowrap;max-width:min(60vw,620px);font-weight:500;font-size:var(--designer-font-lg);overflow:hidden}.subject[data-v-b6ce5e30]{align-items:center;gap:var(--designer-space-sm);min-width:0;height:100%;display:flex}.subject .document-name[data-v-b6ce5e30]{text-overflow:ellipsis;white-space:nowrap;max-width:min(35vw,360px);font-size:var(--designer-font-xs);background-color:var(--color-surface-disabled,color-mix(in srgb, var(--designer-text) 4%, var(--designer-panel)));border-radius:var(--radius-xs,6px);color:var(--color-info,var(--designer-primary));padding:4px 8px;font-weight:500;overflow:hidden}.subject .shared[data-v-b6ce5e30]{color:var(--designer-muted);font-size:var(--designer-font-md);cursor:default}.actions[data-v-b6ce5e30]{height:100%;padding:0 var(--designer-space-md);justify-content:flex-end;align-items:center;gap:var(--designer-space-sm);flex:1;display:flex}.icon[data-v-b6ce5e30]{white-space:nowrap;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;line-height:1;display:inline-flex}@media (width<=720px){.subject[data-v-b6ce5e30]{display:none}.actions[data-v-b6ce5e30]{padding-right:var(--designer-space-sm)}}section[data-v-6baee9bc]{flex-direction:column;display:flex;position:relative}
+/*$vite$:1*/

package/dist/iam-designer.js

@@ -0,0 +1,225 @@
+import { Fragment as e, Teleport as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, getCurrentInstance as c, nextTick as l, normalizeStyle as u, onBeforeUnmount as d, onMounted as f, openBlock as p, ref as m, renderList as h, renderSlot as g, toDisplayString as _, unref as v, watch as y, withModifiers as b } from "vue";
+//#region src/composables/useTranslation.ts
+function x() {
+	let e = c()?.appContext.config.globalProperties, t = e?.$t, n = typeof t == "function" ? t.bind(e) : void 0;
+	return (e, t) => {
+		let r = n?.(e);
+		return r && r !== e ? r : t;
+	};
+}
+//#endregion
+//#region src/widgets/header/IconButton.vue?vue&type=script&setup=true&lang.ts
+var S = [
+	"title",
+	"aria-label",
+	"disabled"
+], C = {
+	class: "icon",
+	"aria-hidden": "true"
+}, w = /*@__PURE__*/ s({
+	__name: "IconButton",
+	props: {
+		icon: { default: "settings" },
+		title: { default: "Settings" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		return (t, n) => (p(), i("button", {
+			class: "icon-button",
+			type: "button",
+			title: e.title,
+			"aria-label": e.title,
+			disabled: e.disabled
+		}, [a("span", C, _(e.icon), 1)], 8, S));
+	}
+}), T = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+}, E = /*#__PURE__*/ T(w, [["__scopeId", "data-v-b3b6390f"]]), D = [
+	"title",
+	"aria-label",
+	"aria-expanded"
+], O = ["disabled", "onClick"], k = {
+	key: 0,
+	class: "icon",
+	"aria-hidden": "true"
+}, A = /*#__PURE__*/ T(/* @__PURE__ */ s({
+	__name: "MoreButton",
+	props: { items: {} },
+	emits: ["select"],
+	setup(o, { emit: s }) {
+		let c = s, S = m(!1), C = m(), w = m(), T = m(), E = m({
+			top: 0,
+			right: 0
+		}), A = x()("tooltip-sidebar-more", "More");
+		function j() {
+			if (!w.value) return;
+			let e = w.value.getBoundingClientRect();
+			E.value = {
+				top: e.bottom + 6,
+				right: Math.max(8, window.innerWidth - e.right)
+			};
+		}
+		function M() {
+			S.value = !S.value;
+		}
+		function N(e) {
+			e.disabled || (c("select", e.id), S.value = !1);
+		}
+		function P(e) {
+			let t = e.target;
+			C.value && !C.value.contains(t) && !T.value?.contains(t) && (S.value = !1);
+		}
+		function F(e) {
+			e.key === "Escape" && (S.value = !1);
+		}
+		return f(() => {
+			document.addEventListener("click", P), document.addEventListener("keydown", F), window.addEventListener("resize", j), window.addEventListener("scroll", j, !0);
+		}), d(() => {
+			document.removeEventListener("click", P), document.removeEventListener("keydown", F), window.removeEventListener("resize", j), window.removeEventListener("scroll", j, !0);
+		}), y(S, async (e) => {
+			e && (await l(), j());
+		}), (s, c) => (p(), i("div", {
+			ref_key: "root",
+			ref: C,
+			class: "more-menu"
+		}, [a("button", {
+			ref_key: "button",
+			ref: w,
+			class: "more-button",
+			type: "button",
+			title: v(A),
+			"aria-label": v(A),
+			"aria-expanded": S.value,
+			"aria-haspopup": "menu",
+			onClick: b(M, ["stop"])
+		}, [...c[0] ||= [a("span", {
+			class: "icon",
+			"aria-hidden": "true"
+		}, "more_vert", -1)]], 8, D), (p(), n(t, { to: "body" }, [S.value ? (p(), i("div", {
+			key: 0,
+			ref_key: "dropdown",
+			ref: T,
+			class: "dropdown",
+			role: "menu",
+			style: u({
+				top: `${E.value.top}px`,
+				right: `${E.value.right}px`
+			})
+		}, [o.items?.length ? (p(!0), i(e, { key: 0 }, h(o.items, (e) => (p(), i("button", {
+			key: e.id,
+			class: "menu-item",
+			type: "button",
+			role: "menuitem",
+			disabled: e.disabled,
+			onClick: (t) => N(e)
+		}, [e.icon ? (p(), i("span", k, _(e.icon), 1)) : r("", !0), a("span", null, _(e.label), 1)], 8, O))), 128)) : g(s.$slots, "menu", { close: () => S.value = !1 }, void 0, !0, 1)], 4)) : r("", !0)]))], 512));
+	}
+}), [["__scopeId", "data-v-923fea1e"]]), j = ["disabled", "aria-busy"], M = {
+	key: 0,
+	class: "spinner",
+	"aria-hidden": "true"
+}, N = /*#__PURE__*/ T(/* @__PURE__ */ s({
+	__name: "SaveButton",
+	props: {
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		working: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		let t = x();
+		return (n, o) => (p(), i("button", {
+			class: "save-button",
+			type: "button",
+			disabled: e.disabled || e.working,
+			"aria-busy": e.working
+		}, [e.working ? (p(), i("span", M)) : r("", !0), a("span", null, _(v(t)("save-changes", "Save changes")), 1)], 8, j));
+	}
+}), [["__scopeId", "data-v-4a359870"]]), P = { class: "branding" }, F = { class: "title" }, I = { class: "subject" }, L = { class: "document-name" }, R = ["title"], z = { class: "actions" }, B = /*#__PURE__*/ T(/* @__PURE__ */ s({
+	__name: "Header",
+	props: {
+		subject: {},
+		shared: { type: Boolean },
+		themeChangeable: { type: Boolean },
+		moreItems: {}
+	},
+	emits: ["moreSelect"],
+	setup(e, { emit: t }) {
+		let s = e, c = t, l = x();
+		return (t, u) => (p(), i("header", null, [
+			a("div", P, [u[1] ||= a("span", { class: "icon" }, "design_services", -1), a("span", F, _(v(l)("designer", "Designer")), 1)]),
+			a("div", I, [a("span", L, _(e.subject), 1), e.shared ? (p(), i("span", {
+				key: 0,
+				class: "shared icon",
+				title: v(l)("shared", "Shared")
+			}, "groups", 8, R)) : r("", !0)]),
+			a("div", z, [
+				o(E, {
+					icon: "translate",
+					title: v(l)("translations", "Translations")
+				}, null, 8, ["title"]),
+				o(E, {
+					icon: "palette",
+					title: v(l)("change-theme", "Change theme")
+				}, null, 8, ["title"]),
+				s.themeChangeable === !1 ? r("", !0) : (p(), n(E, {
+					key: 0,
+					icon: "dark_mode",
+					title: v(l)("toggle-theme", "Toggle theme")
+				}, null, 8, ["title"])),
+				o(E, {
+					icon: "visibility",
+					title: v(l)("preview", "Preview")
+				}, null, 8, ["title"]),
+				o(N, {
+					disabled: !1,
+					working: !1
+				}),
+				o(A, {
+					items: s.moreItems,
+					onSelect: u[0] ||= (e) => c("moreSelect", e)
+				}, null, 8, ["items"])
+			])
+		]));
+	}
+}), [["__scopeId", "data-v-b6ce5e30"]]), V = { class: "iam-designer" }, H = /*#__PURE__*/ T(/* @__PURE__ */ s({
+	__name: "Designer",
+	props: {
+		value: {},
+		options: {}
+	},
+	emits: ["moreSelect"],
+	setup(e, { emit: t }) {
+		let n = t;
+		function r(e) {
+			n("moreSelect", e);
+		}
+		return (t, n) => (p(), i("section", V, [
+			o(B, {
+				subject: e.options?.subject ?? "",
+				shared: e.options?.shared,
+				"theme-changeable": e.options?.theme?.changeable,
+				"more-items": e.options?.moreItems,
+				onMoreSelect: r
+			}, null, 8, [
+				"subject",
+				"shared",
+				"theme-changeable",
+				"more-items"
+			]),
+			n[0] ||= a("h2", null, "UI Designer", -1),
+			a("p", null, "Value: " + _(e.value), 1)
+		]));
+	}
+}), [["__scopeId", "data-v-6baee9bc"]]);
+//#endregion
+export { H as Designer };

package/dist/icons.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import './designer.css';
+export { default as Designer } from './Designer.vue';
+export type { MoreMenuItem } from './widgets/header/types';

package/dist/widgets/Header.vue.d.ts

@@ -0,0 +1,14 @@
+import type { MoreMenuItem } from './header/types';
+type __VLS_Props = {
+    subject: string;
+    shared: boolean | undefined;
+    themeChangeable?: boolean;
+    moreItems?: MoreMenuItem[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    moreSelect: (id: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onMoreSelect?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/widgets/header/IconButton.vue.d.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    icon?: string;
+    title?: string;
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    icon: string;
+    title: string;
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/widgets/header/MoreButton.vue.d.ts

@@ -0,0 +1,23 @@
+import type { MoreMenuItem } from './types';
+type __VLS_Props = {
+    items?: MoreMenuItem[];
+};
+declare var __VLS_7: {
+    close: () => boolean;
+};
+type __VLS_Slots = {} & {
+    menu?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (id: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/widgets/header/SaveButton.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    disabled?: boolean;
+    working?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    disabled: boolean;
+    working: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/widgets/header/types.d.ts

@@ -0,0 +1,6 @@
+export interface MoreMenuItem {
+    id: string;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@aham.ro/ui-designer",
+  "version": "0.1.3",
+  "description": "Vue components for the UI designer for IAM and email templates.",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/ui-designer.js",
+  "module": "./dist/ui-designer.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/ui-designer.js"
+    },
+    "./style.css": "./dist/ui-designer.css",
+    "./designer.css": "./dist/ui-designer.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && vue-tsc --project tsconfig.lib.json",
+    "build:watch": "vite build --watch",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.42"
+  },
+  "devDependencies": {
+    "@types/node": "^24.13.3",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vue/tsconfig": "^0.9.1",
+    "typescript": "~6.0.2",
+    "vite": "^8.3.0",
+    "vue-tsc": "^3.3.11",
+    "vue": "^3.5.42"
+  }
+}