sliced-areas 1.0.0

package/dist/styles.css

@@ -0,0 +1,182 @@
+sliced-areas {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.sliced-areas-root {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  grid-row: 1 / -1;
+  grid-column: 1 / -1;
+  overflow: hidden;
+  background: #2f2f2f;
+  background-image: linear-gradient(180deg, #353535 0%, #2b2b2b 100%);
+}
+
+.sliced-areas-stash {
+  display: none;
+}
+
+.sliced-areas-area {
+  position: absolute;
+  display: flex;
+  min-height: 0;
+  min-width: 0;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: linear-gradient(180deg, #3a3a3a 0%, #2f2f2f 100%);
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
+    0 0 0 1px rgba(0, 0, 0, 0.35);
+  box-sizing: border-box;
+}
+
+.sliced-areas-area:hover {
+  border-color: rgba(200, 200, 200, 0.22);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
+    0 0 0 1px rgba(0, 0, 0, 0.35),
+    0 0 0 1px rgba(200, 200, 200, 0.16);
+}
+
+.sliced-areas-auto-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #e2e8f0;
+  font-size: 14px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  height: 100%;
+  width: 100%;
+}
+
+.sliced-areas-handle {
+  position: absolute;
+  background: transparent;
+  z-index: 5;
+  border-radius: 999px;
+  box-shadow: none;
+  opacity: 0;
+}
+
+.sliced-areas-handle:hover {
+  background: transparent;
+}
+
+.sliced-areas-handle.is-vertical {
+  cursor: col-resize;
+}
+
+.sliced-areas-handle.is-horizontal {
+  cursor: row-resize;
+}
+
+.sliced-areas-overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 6;
+}
+
+.sliced-areas-corner {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  border-radius: 3px;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  opacity: 0;
+  pointer-events: auto;
+}
+
+.sliced-areas-corner.is-top-left {
+  top: 0;
+  left: 0;
+}
+
+.sliced-areas-corner.is-top-right {
+  top: 0;
+  right: 0;
+}
+
+.sliced-areas-corner.is-bottom-left {
+  bottom: 0;
+  left: 0;
+}
+
+.sliced-areas-corner.is-bottom-right {
+  bottom: 0;
+  right: 0;
+}
+
+.sliced-areas-drop {
+  position: absolute;
+  pointer-events: none;
+  background: rgba(120, 120, 120, 0.18);
+  border: 1px solid rgba(190, 190, 190, 0.5);
+  z-index: 7;
+}
+
+.sliced-areas-drop[data-split-mode='true'] {
+  background: transparent;
+  border-color: transparent;
+}
+
+.sliced-areas-drop-piece {
+  position: absolute;
+  background: rgba(160, 160, 160, 0.18);
+  border: 1px solid rgba(200, 200, 200, 0.45);
+}
+
+.sliced-areas-drop-dim {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 6;
+}
+
+.sliced-areas-drop-dim-piece {
+  position: absolute;
+  background: rgba(0, 0, 0, 0.45);
+  border: 1px solid rgba(0, 0, 0, 0.55);
+}
+
+.sliced-areas-drop[data-zone='center'] {
+  background: rgba(180, 180, 180, 0.2);
+  border-color: rgba(220, 220, 220, 0.55);
+}
+
+.sliced-areas-drop[data-mode='swap'] {
+  background: rgba(150, 150, 150, 0.2);
+  border-color: rgba(210, 210, 210, 0.55);
+}
+
+.sliced-areas-drop[data-zone='left'],
+.sliced-areas-drop[data-zone='right'],
+.sliced-areas-drop[data-zone='top'],
+.sliced-areas-drop[data-zone='bottom'] {
+  background: rgba(150, 150, 150, 0.2);
+  border-color: rgba(210, 210, 210, 0.55);
+}
+
+.sliced-areas-drag-label {
+  position: fixed;
+  transform: translate(12px, 12px);
+  background: rgba(28, 28, 28, 0.92);
+  color: #e6e6e6;
+  border: 1px solid rgba(140, 140, 140, 0.5);
+  border-radius: 999px;
+  padding: 4px 10px;
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  pointer-events: none;
+  z-index: 10;
+}

package/dist/vue.d.ts

@@ -0,0 +1,35 @@
+import { type App, type PropType } from 'vue';
+import './sliced-areas';
+import type { AreaResolver, AreasLayout } from './sliced-areas';
+export type { AreaId, AreaRect, AreaTag, AreasGraph, AreasLayout, AreaResolver, CornerClickDetail, GraphArea, GraphEdge, GraphVert, SlicedAreasElement, } from './sliced-areas';
+declare const SlicedAreas: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    layout: {
+        type: PropType<AreasLayout | null>;
+        default: null;
+    };
+    resolver: {
+        type: PropType<AreaResolver | null>;
+        default: null;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("layoutchange" | "cornerclick")[], "layoutchange" | "cornerclick", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    layout: {
+        type: PropType<AreasLayout | null>;
+        default: null;
+    };
+    resolver: {
+        type: PropType<AreaResolver | null>;
+        default: null;
+    };
+}>> & Readonly<{
+    onLayoutchange?: ((...args: any[]) => any) | undefined;
+    onCornerclick?: ((...args: any[]) => any) | undefined;
+}>, {
+    layout: AreasLayout | null;
+    resolver: AreaResolver | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const SlicedAreasPlugin: {
+    install(app: App): void;
+};
+export default SlicedAreas;

package/dist/vue.js

@@ -0,0 +1,46 @@
+import { defineComponent, h, onBeforeUnmount, onMounted, ref, useAttrs, watch } from "vue";
+var SlicedAreas = defineComponent({
+	name: "SlicedAreas",
+	inheritAttrs: !1,
+	props: {
+		layout: {
+			type: Object,
+			default: null
+		},
+		resolver: {
+			type: Function,
+			default: null
+		}
+	},
+	emits: ["layoutchange", "cornerclick"],
+	setup(e, { emit: s, slots: c }) {
+		let l = useAttrs(), u = ref(null), d = (e) => {
+			s("layoutchange", e.detail);
+		}, f = (e) => {
+			s("cornerclick", e.detail);
+		};
+		return onMounted(() => {
+			let e = u.value;
+			e.addEventListener("sliced-areas:layoutchange", d), e.addEventListener("sliced-areas:cornerclick", f);
+		}), onBeforeUnmount(() => {
+			let e = u.value;
+			e.removeEventListener("sliced-areas:layoutchange", d), e.removeEventListener("sliced-areas:cornerclick", f);
+		}), watch([
+			() => u.value,
+			() => e.resolver,
+			() => e.layout
+		], ([e, a, o]) => {
+			e && (e.setResolver(a), e.layout = o);
+		}, { immediate: !0 }), () => h("sliced-areas", {
+			...l,
+			ref: u
+		}, c.default?.());
+	}
+});
+const SlicedAreasPlugin = { install(e) {
+	e.component("SlicedAreas", SlicedAreas);
+} };
+var vue_default = SlicedAreas;
+export { SlicedAreasPlugin, vue_default as default };
+
+//# sourceMappingURL=vue.js.map

package/dist/vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.js","names":[],"sources":["../src/plugin/vue.ts"],"sourcesContent":["import {\n  defineComponent,\n  h,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  useAttrs,\n  watch,\n  type App,\n  type PropType,\n} from 'vue'\n\nimport './sliced-areas'\nimport type { AreaResolver, AreasLayout, CornerClickDetail, SlicedAreasElement } from './sliced-areas'\n\nexport type {\n  AreaId,\n  AreaRect,\n  AreaTag,\n  AreasGraph,\n  AreasLayout,\n  AreaResolver,\n  CornerClickDetail,\n  GraphArea,\n  GraphEdge,\n  GraphVert,\n  SlicedAreasElement,\n} from './sliced-areas'\n\nconst SlicedAreas = defineComponent({\n  name: 'SlicedAreas',\n  inheritAttrs: false,\n  props: {\n    layout: {\n      type: Object as PropType<AreasLayout | null>,\n      default: null,\n    },\n    resolver: {\n      type: Function as unknown as PropType<AreaResolver | null>,\n      default: null,\n    },\n  },\n  emits: ['layoutchange', 'cornerclick'],\n  setup(props, { emit, slots }) {\n    const attrs = useAttrs()\n    const elementRef = ref<SlicedAreasElement | null>(null)\n\n    const onLayoutChange = (event: Event) => {\n      const customEvent = event as CustomEvent<{ layout: AreasLayout }>\n      emit('layoutchange', customEvent.detail)\n    }\n\n    const onCornerClick = (event: Event) => {\n      const customEvent = event as CustomEvent<CornerClickDetail>\n      emit('cornerclick', customEvent.detail)\n    }\n\n    onMounted(() => {\n      const element = elementRef.value!\n      element.addEventListener('sliced-areas:layoutchange', onLayoutChange)\n      element.addEventListener('sliced-areas:cornerclick', onCornerClick)\n    })\n\n    onBeforeUnmount(() => {\n      const element = elementRef.value!\n      element.removeEventListener('sliced-areas:layoutchange', onLayoutChange)\n      element.removeEventListener('sliced-areas:cornerclick', onCornerClick)\n    })\n\n    watch(\n      [() => elementRef.value, () => props.resolver, () => props.layout],\n      ([element, resolver, layout]) => {\n        if (!element) return\n        element.setResolver(resolver)\n        element.layout = layout\n      },\n      { immediate: true },\n    )\n\n    return () =>\n      h(\n        'sliced-areas',\n        {\n          ...attrs,\n          ref: elementRef,\n        },\n        slots.default?.(),\n      )\n  },\n})\n\nexport const SlicedAreasPlugin = {\n  install(app: App) {\n    app.component('SlicedAreas', SlicedAreas)\n  },\n}\n\nexport default SlicedAreas\n"],"mappings":";AA6BA,IAAM,cAAc,gBAAgB;CAClC,MAAM;CACN,cAAc;CACd,OAAO;EACL,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EACD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EACF;CACD,OAAO,CAAC,gBAAgB,cAAc;CACtC,MAAM,GAAO,EAAE,SAAM,YAAS;EAC5B,IAAM,IAAQ,UAAU,EAClB,IAAa,IAA+B,KAAK,EAEjD,KAAkB,MAAiB;AAEvC,KAAK,gBADe,EACa,OAAO;KAGpC,KAAiB,MAAiB;AAEtC,KAAK,eADe,EACY,OAAO;;AAyBzC,SAtBA,gBAAgB;GACd,IAAM,IAAU,EAAW;AAE3B,GADA,EAAQ,iBAAiB,6BAA6B,EAAe,EACrE,EAAQ,iBAAiB,4BAA4B,EAAc;IACnE,EAEF,sBAAsB;GACpB,IAAM,IAAU,EAAW;AAE3B,GADA,EAAQ,oBAAoB,6BAA6B,EAAe,EACxE,EAAQ,oBAAoB,4BAA4B,EAAc;IACtE,EAEF,MACE;SAAO,EAAW;SAAa,EAAM;SAAgB,EAAM;GAAO,GACjE,CAAC,GAAS,GAAU,OAAY;AAC1B,SACL,EAAQ,YAAY,EAAS,EAC7B,EAAQ,SAAS;KAEnB,EAAE,WAAW,IAAM,CACpB,QAGC,EACE,gBACA;GACE,GAAG;GACH,KAAK;GACN,EACD,EAAM,WAAW,CAClB;;CAEN,CAAC;AAEF,MAAa,oBAAoB,EAC/B,QAAQ,GAAU;AAChB,GAAI,UAAU,eAAe,YAAY;GAE5C;AAED,IAAA,cAAe"}

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "sliced-areas",
+  "description": "Blender-like \"Areas\" layout system as a Web Component with an optional Vue 3 wrapper.",
+  "keywords": [
+    "areas",
+    "layout",
+    "web-components",
+    "vue",
+    "splitter",
+    "dock",
+    "tiling",
+    "blender"
+  ],
+  "version": "1.0.0",
+  "type": "module",
+  "license": "MIT",
+  "author": "Pavel Voronin",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pavel-voronin/sliced-areas.git"
+  },
+  "homepage": "https://github.com/pavel-voronin/sliced-areas#readme",
+  "bugs": {
+    "url": "https://github.com/pavel-voronin/sliced-areas/issues"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./vue": {
+      "types": "./dist/vue.d.ts",
+      "import": "./dist/vue.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "./dist/styles.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "build:lib": "run-s build:lib:bundle build:lib:types build:lib:styles",
+    "build:lib:bundle": "vite build -c vite.lib.config.ts",
+    "build:lib:types": "tsc -p tsconfig.lib.json",
+    "build:lib:styles": "node scripts/copy-styles.mjs",
+    "prepublishOnly": "run-s type-check test build:lib",
+    "type-check": "vue-tsc --build",
+    "test": "vitest --coverage",
+    "lint:oxlint": "oxlint . --fix -D correctness --ignore-path .gitignore",
+    "lint:eslint": "eslint . --fix --cache",
+    "lint": "run-s lint:*",
+    "format": "prettier --write --experimental-cli src/"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.25"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    }
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "@prettier/plugin-oxc": "^0.0.5",
+    "@tsconfig/node24": "^24.0.3",
+    "@types/jsdom": "^27.0.0",
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^6.0.2",
+    "@vitest/coverage-v8": "^4.0.16",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.6.0",
+    "@vue/tsconfig": "^0.8.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-oxlint": "~1.29.0",
+    "eslint-plugin-vue": "~10.5.1",
+    "jiti": "^2.6.1",
+    "jsdom": "^27.2.0",
+    "npm-run-all2": "^8.0.4",
+    "oxlint": "~1.29.0",
+    "prettier": "3.6.2",
+    "tailwindcss": "^4.1.18",
+    "typescript": "~5.9.0",
+    "vite": "npm:rolldown-vite@latest",
+    "vite-plugin-vue-devtools": "^8.0.5",
+    "vitest": "^4.0.14",
+    "vue": "^3.5.25",
+    "vue-tsc": "^3.1.5"
+  }
+}