@getdom/studio 0.1.0

package/LICENSE.md

@@ -0,0 +1,109 @@
+# DOM Studio Commercial License 1.0
+
+Copyright (c) 2026 Steve O'Brien. All rights reserved.
+
+This license applies to DOM Studio, including the `@getdom/studio` package,
+components, source files, examples, templates, blocks, documentation assets,
+and modified versions of those materials (the "Software").
+
+## Evaluation license
+
+You may install, copy, and modify the publicly available `@getdom/studio`
+package solely to evaluate it in local development and non-public test
+environments.
+
+The evaluation license does not permit you to use the Software in a production
+environment, publish or deploy a product containing the Software, distribute a
+product containing the Software to another person, or use the Software to
+provide paid services to a client.
+
+## Commercial license
+
+A valid DOM Studio purchase grants the purchaser an ongoing, non-exclusive,
+non-transferable commercial license, subject to the licence type identified in
+the order confirmation.
+
+### Individual
+
+An Individual licence permits one named individual to:
+
+- use and modify the Software in unlimited personal or commercial products owned by that individual;
+- deploy and distribute those products to end users; and
+- maintain those products for their end users.
+
+The Individual licence does not permit sharing the Software or paid source
+access with colleagues, employees, contractors, or clients.
+
+### Team
+
+A Team licence permits the purchasing legal entity to:
+
+- allow its employees and contractors to use and modify the Software on its behalf;
+- use the Software in unlimited products owned by that entity;
+- deploy and distribute those products to end users; and
+- incorporate the Software into bespoke products created for its clients.
+
+Contractors may use the Software only while working on behalf of the purchasing
+entity and must not retain or reuse it for unrelated work. A client may receive
+the Software only as part of a bespoke end product and may not extract or reuse
+it as a standalone component library unless the client obtains its own licence.
+
+## Permitted modifications and distribution
+
+You may modify the Software and distribute it only as an inseparable part of a
+larger end product that provides substantial functionality beyond the Software.
+You may include compiled or source forms when reasonably necessary to build,
+operate, maintain, or deliver that end product, provided recipients are not
+given rights to reuse the Software outside it.
+
+## Restrictions
+
+You must not:
+
+- sell, sublicense, publish, share, or redistribute the Software as a standalone product;
+- make the Software available as a component library, UI kit, template library, starter kit, source catalogue, or substantially similar product;
+- use the Software to create a product whose primary purpose is to let its users build or export competing component libraries, templates, or UI kits;
+- share account access, paid downloads, source archives, or private documentation outside the scope of the purchased licence;
+- remove copyright, licence, or attribution notices from distributed source archives; or
+- represent the Software as your original component library for resale or relicensing.
+
+## Updates
+
+A purchase described as "lifetime v1 access" includes releases published under
+major version 1 while DOM Studio makes them available. It does not include a
+right to future major versions, hosted services, consulting, or support unless
+the order confirmation says otherwise.
+
+## Ownership
+
+The Software is licensed, not sold. Steve O'Brien retains all copyright and
+other intellectual-property rights in the Software. You retain ownership of
+your original application code and of original modifications that do not
+incorporate protectable parts of the Software, subject to the rights required
+to use any derivative work under this license.
+
+## Termination
+
+This license terminates automatically if you materially breach it and do not
+remedy the breach within 14 days after written notice. On termination, you must
+stop using and distributing the Software and delete copies under your control,
+except where applicable law requires retention.
+
+## Warranty and liability
+
+The Software is provided "as is", without warranties of any kind to the maximum
+extent permitted by law. To the maximum extent permitted by law, total liability
+arising from the Software is limited to the amount paid for the applicable DOM
+Studio licence. Nothing in this license excludes liability that cannot lawfully
+be excluded.
+
+## Governing law
+
+This license is governed by the laws of England and Wales, and the courts of
+England and Wales have exclusive jurisdiction, unless mandatory consumer law
+requires otherwise.
+
+## Questions
+
+For licensing questions or permissions beyond this license, contact the address
+shown on the purchaser's order confirmation or visit https://getdom.studio.

package/README.md

@@ -0,0 +1,44 @@
+# DOM Studio
+
+DOM Studio is a Vue 3 and Web Component interface system for application UI.
+
+## Install
+
+```sh
+npm install @getdom/studio
+```
+
+Import the maintained Vue components and the Tailwind CSS v4 stylesheet:
+
+```js
+import { DomButton, DomCard, DomForm } from '@getdom/studio';
+import '@getdom/studio/style.css';
+```
+
+The explicit Vue entry point exports the same component surface:
+
+```js
+import { DomButton } from '@getdom/studio/vue';
+```
+
+Register the framework-neutral custom elements when required:
+
+```js
+import '@getdom/studio/headless';
+```
+
+## Peer dependencies
+
+- Vue 3.5 or later.
+- Tailwind CSS 4.2 or later configured in the consuming application.
+- Vue Router 4.6 or later.
+- Pinia 2.3 or 3.
+
+## Licence
+
+The package is publicly downloadable for local evaluation. A paid DOM Studio
+licence is required for production, deployed, distributed, commercial, or
+client use. See `LICENSE.md` in this package for the complete terms.
+
+Documentation, examples, licences, and source access are available from
+[getdom.studio](https://getdom.studio).

package/SKILL.md

@@ -0,0 +1,83 @@
+---
+name: dom-studio
+description: Build, edit, or review application UI with DOM Studio. Use when generating Vue UI with @getdom/studio or @getdom/studio/vue, creating editable Studio specs, composing DOM Studio blocks/components/forms/headless primitives, adding DOM Studio components or docs metadata, or replacing custom UI behavior with DOM Studio primitives.
+---
+
+# DOM Studio
+
+DOM Studio is a complete Vue and Web Component UI system for app-like interfaces teams can own, edit, and ship. Prefer its blocks, Vue components, headless primitives, Studio specs, and theme tokens before inventing custom UI behavior.
+
+## Workflow
+
+1. Classify the screen: dashboard, chat, mail, form, login, application shell, settings, detail, or custom.
+2. Start from the closest block or example under `src/pages/blocks` when the request matches a common app pattern.
+3. Compose with `@getdom/studio` components before writing custom markup; `@getdom/studio/vue` exports the same Vue surface when an explicit subpath is clearer.
+4. Use props for behavior and Tailwind CSS v4 utilities in the template for layout, spacing, typography, color, states, responsive behavior, and transitions.
+5. Use semantic theme utilities, not raw colors, unless defining a theme.
+6. Return a Studio spec when the UI should remain visually editable.
+7. Validate by running the app or build and checking the changed route at desktop and mobile sizes.
+
+Component styling is Tailwind-first. Keep scoped CSS only for intrinsic component behavior or CSS that would be materially less readable as utilities, such as coordinated container queries, complex selector relationships, pseudo-elements, and keyframes. Do not create BEM class trees solely as presentational hooks.
+
+## Imports
+
+```js
+import {
+	DomButton,
+	DomCard,
+	DomCombobox,
+	DomForm,
+	DomTextInput,
+} from '@getdom/studio';
+```
+
+The package root exports the same Vue surface as `@getdom/studio/vue`. Use headless custom elements by importing `@getdom/studio/headless`; Vite treats tags beginning with `dom-` as custom elements.
+
+## Component Choice
+
+- Use blocks for complete screens: dashboard, chat, mail, forms, login, and application layout.
+- Use `DomCard` for contained app surfaces and grouped content.
+- Use `DomButton` for actions; set `variant`, `size`, `loading`, and `disabled` with props.
+- Use `DomDialog`, `DomDrawer`, `DomPopover`, `DomDropdown`, `DomMenu`, `DomContextMenu`, and `DomCommandPalette` instead of recreating overlays, focus handling, or keyboard navigation.
+- Use `DomTabs`, `DomAccordion`, `DomTreeView`, and `DomScrollMenu` for structured navigation, disclosure, and scroll-linked page contents. Use `DomBreadcrumbs` for an application-owned route or resource path and `DomStepper` for controlled multi-step progress.
+- Use `DomToastStack`, `DomToastItem`, and `useToasts` for notifications.
+- Use `DomNativeSelect` for small native option lists, `DomListbox` for custom single-choice lists, `DomCombobox` for search plus committed selection, and `DomAutocomplete` for free text with suggestions.
+- Use `DomCalendar` for month-grid date picking and `DomDatePicker` for typed date entry with a popover calendar.
+- Use `DomTextareaInput` for fixed or autosizing multiline fields. Use `DomTextareaComposer` when attachment previews, leading controls, trailing actions, and submit behavior belong inside one autosizing input frame; keep upload state and attachment records in the application.
+- Use `DomKanban` when one application-owned resource list needs status columns, card and column ordering, async creation hooks, custom card components, and drag or keyboard movement. Keep grid/calendar view switching and remote persistence in the application layer.
+- Use `DomFilterBar` when search and logical filter values should form one controlled query shared by resource lists, grids, timelines, routes, or Pinia stores. Translate its `FilterBarQuery` at the application API boundary.
+- Use `DomActivityTimeline` to project ordered application-owned rows into an activity trail through logical field keys. Keep querying, chronology, pagination, permissions, and persistence in the application layer.
+- Use `DomMonthCalendar` for date-led month planning and `DomWeekPlanner` when fixed-width day swim lanes need precise timed placement, configurable drag-to-create ranges, a live current-time marker, or virtualized horizontal ranges such as a full year.
+- Use `DomCodeInput` for prompts, snippets, templates, and structured text; use `DomJsonInput` for parsed JSON values; use `DomJsonListInput` for schema-aware arrays such as options, commands, menu rows, and inspector data.
+- Use `DomCodeBlock` for highlighted read-only code and `DomJsonViewer` for inspecting JSON payloads, diagnostics, and implementation data.
+- Use `DomTextDiff` for reviewable before-and-after copy, AI rewrite suggestions, SEO field replacements, and unified or split code edits.
+- Use `DomAppShell`, `DomAppTopBar`, `DomAppBottomNav`, `DomAppListItem`, `DomSafeArea`, and `DomActionSheet` for Capacitor-style app screens.
+
+## Studio Specs
+
+Return a Studio spec when generated UI should be editable later. A spec is a UI tree, not a component discovery record.
+
+```json
+{
+	"id": "account-settings",
+	"label": "Account settings",
+	"component": "DomCard",
+	"props": {
+		"padding": "lg",
+		"class": "w-full max-w-2xl"
+	},
+	"children": [
+		{
+			"id": "email",
+			"label": "Email input",
+			"component": "DomTextInput",
+			"props": {
+				"label": "Email address",
+				"placeholder": "you@example.com"
+			}
+		}
+	]
+}
+```
+
+Use component export names such as `DomTextInput` or ordinary HTML tags such as `section`, `h2`, and `p`. Avoid anonymous layers and large unstructured HTML blobs when a spec would preserve intent.

package/package.json

@@ -0,0 +1,73 @@
+{
+	"name": "@getdom/studio",
+	"version": "0.1.0",
+	"description": "A Vue 3 and Web Component interface system for application UI.",
+	"type": "module",
+	"license": "SEE LICENSE IN LICENSE.md",
+	"author": "Steve O'Brien",
+	"homepage": "https://getdom.studio",
+	"keywords": [
+		"vue",
+		"web-components",
+		"custom-elements",
+		"component-library",
+		"design-system"
+	],
+	"sideEffects": [
+		"**/*.css",
+		"src/pages/lib/headless/*.js"
+	],
+	"types": "./src/pages/lib/vue/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./src/pages/lib/vue/index.d.ts",
+			"import": "./src/pages/lib/vue/index.js"
+		},
+		"./vue": {
+			"types": "./src/pages/lib/vue/index.d.ts",
+			"import": "./src/pages/lib/vue/index.js"
+		},
+		"./headless": {
+			"types": "./src/pages/lib/headless/index.d.ts",
+			"import": "./src/pages/lib/headless/index.js"
+		},
+		"./headless/*.js": {
+			"types": "./src/pages/lib/headless/*.d.ts",
+			"import": "./src/pages/lib/headless/*.js"
+		},
+		"./headless/*": {
+			"types": "./src/pages/lib/headless/*.d.ts",
+			"import": "./src/pages/lib/headless/*.js"
+		},
+		"./style.css": "./src/style.css",
+		"./llms.txt": "./public/llms.txt",
+		"./skill": "./SKILL.md",
+		"./skills.sh": "./public/skills.sh",
+		"./package.json": "./package.json"
+	},
+	"peerDependencies": {
+		"pinia": "^2.3.0 || ^3.0.0",
+		"tailwindcss": "^4.2.0",
+		"vue": "^3.5.0",
+		"vue-router": "^4.6.0"
+	},
+	"dependencies": {
+		"@tiptap/extension-code-block": "3.27.3",
+		"@tiptap/extension-collaboration": "^3.27.3",
+		"@tiptap/extension-collaboration-caret": "^3.27.3",
+		"@tiptap/extension-image": "^3.27.3",
+		"@tiptap/extension-link": "^3.27.3",
+		"@tiptap/extension-placeholder": "^3.27.3",
+		"@tiptap/extension-table": "3.27.3",
+		"@tiptap/extension-underline": "^3.27.3",
+		"@tiptap/pm": "^3.27.3",
+		"@tiptap/starter-kit": "^3.27.3",
+		"@tiptap/vue-3": "^3.27.3"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"engines": {
+		"node": ">=20"
+	}
+}

package/public/llms.txt

@@ -0,0 +1,57 @@
+# DOM Studio
+
+> DOM Studio is a complete, code-first Vue 3 and web component interface system for building application UI that teams can own, edit, and ship.
+
+DOM Studio combines public Vue package exports, framework-neutral headless elements, copyable source blocks, documentation metadata, semantic theme tokens, and optional Studio-editable UI specs. It is designed for product interfaces such as dashboards, settings, forms, chat and agent tools, mail clients, operations consoles, billing, onboarding, data workflows, and mobile app shells.
+
+When building with DOM Studio, start from the closest block or example, compose with existing components, use props for behaviour, and use Tailwind CSS v4 utilities with semantic theme tokens for presentation. Let DOM Studio own accessibility, focus management, keyboard navigation, overlays, selection behaviour, and form semantics. Use a Studio spec only when the generated UI should remain visually editable or serializable as a named component tree.
+
+The package root and `@getdom/studio/vue` export the same Vue surface. Import `@getdom/studio/style.css` for styles and `@getdom/studio/headless` to register the framework-neutral `dom-*` custom elements. Blocks are repository-local source patterns to copy and adapt, not published package exports.
+
+## Core Documentation
+
+- [Overview](https://getdom.studio/): Product positioning, package usage, and the main DOM Studio surfaces.
+- [AI builders](https://getdom.studio/ai): Rules for reliable LLM-generated interfaces and when to return Studio specs.
+- [Theming](https://getdom.studio/theming): Semantic colour tokens, light and dark themes, material skins, radii, and shadows.
+- [Component and docs contract](https://getdom.studio/component-spec): Auto-discovery, `defineOptions({ __doc })`, prop metadata, generated docs, and Studio registration.
+- [Studio](https://getdom.studio/components/studio): Visual editing and saved UI trees made from components, props, children, stable ids, and human labels.
+
+## UI Library
+
+- [General components](https://getdom.studio/components/button): Actions, overlays, menus, breadcrumbs, steppers, navigation, disclosure, toolbars, and interaction primitives.
+- [Forms](https://getdom.studio/forms): Form composition, fields, validation, fixed and autosizing textareas, compound composers with attachment/action slots, selectors, dates, files, code, and structured JSON values.
+- [Data components](https://getdom.studio/data): Controlled filter queries, data grids, timelines, Kanban boards, calendars, media workflows, document editing, and agent conversations.
+- [Filter bar](https://getdom.studio/data/filter-bar): Transport-free search and logical filter definitions that emit one controlled resource query.
+- [Activity timeline](https://getdom.studio/data/activity-timeline): Ordered resource activity with logical field mappings, semantic status, controlled loading, and customizable slots.
+- [Developer components](https://getdom.studio/dev): Code, JSON, payload, and implementation-data inspection utilities.
+- [Visual components](https://getdom.studio/visual/card): Cards, badges, status, alerts, empty states, progress, skeletons, avatars, and diffs.
+- [Mobile components](https://getdom.studio/mobile): App shells, top and bottom navigation, screen stacks, safe areas, list rows, and action sheets.
+- [Headless elements](https://getdom.studio/headless): Framework-neutral `dom-*` custom elements for accessible behaviour without prescribed presentation.
+
+## Application Blocks
+
+- [Block catalog](https://getdom.studio/blocks): Complete, source-copy application workflows organised by nested product category.
+- [Application layout](https://getdom.studio/blocks/app-shells/application-layout): Responsive product shell with navigation and application content.
+- [AI collaboration shell](https://getdom.studio/blocks/app-shells/ai-workspaces/ai-collaboration-shell): Workspace composition for AI-assisted product work.
+- [Dashboard](https://getdom.studio/blocks/app-shells/dashboard): Dense, practical dashboard composition.
+- [Forms workflow](https://getdom.studio/blocks/data-capture/forms): Product-grade data capture built from DOM Studio form primitives.
+- [Chat](https://getdom.studio/blocks/communication/chat): Application chat workflow and message composition.
+- [Mail](https://getdom.studio/blocks/communication/mail): Mail client layout and interaction pattern.
+- [Resource scheduler](https://getdom.studio/blocks/operations/scheduling/resource-scheduler): Operations scheduling with resource-aware planning.
+
+## Optional
+
+- [Dialog](https://getdom.studio/components/dialog): Modal behaviour, focus handling, stacked dialogs, and schema-driven forms.
+- [Combobox](https://getdom.studio/forms/combobox): Searchable, committed selection; use autocomplete instead for free text with suggestions.
+- [Document editor](https://getdom.studio/data/document-editor): Rich document editing with collaboration and reviewable AI workflow examples.
+- [Agent chat](https://getdom.studio/data/agent-chat): Reusable agent conversation, conversation list, and chat shell surfaces.
+- [Month calendar](https://getdom.studio/data/month-calendar): Data-backed month planning and customisable calendar workflows.
+- [Week planner](https://getdom.studio/data/week-planner): Fixed-width day swim lanes with internal two-axis scrolling, configurable drag-to-create time ranges, a live current-time line, and virtualized horizontal ranges up to a full year or more.
+- [Data grid](https://getdom.studio/data/data-grid): Sortable, filterable, API-shaped tabular data.
+- [Breadcrumbs](https://getdom.studio/components/breadcrumbs): Route or resource-path navigation with current-location semantics and optional middle-path collapsing.
+- [Stepper](https://getdom.studio/components/stepper): Controlled horizontal or vertical progress navigation for multi-step workflows.
+- [Kanban](https://getdom.studio/data/kanban): Controlled status boards with custom Vue cards, card and column ordering, async creation hooks, and resource rows shared with grid or calendar views.
+- [Code block](https://getdom.studio/dev/code-block): Highlighted read-only code for implementation and diagnostic output.
+- [JSON viewer](https://getdom.studio/dev/json-viewer): Structured payload and diagnostic-data inspection.
+- [Text diff](https://getdom.studio/visual/text-diff): Reviewable before-and-after text and code changes.
+- [Scroll menu](https://getdom.studio/components/scroll-menu): Scrollspy page contents built from real fragment links and current-location semantics.

package/public/skills.sh

@@ -0,0 +1,11 @@
+#!/usr/bin/env sh
+cat <<'EOF'
+DOM Studio AI instructions
+
+- Prefer DOM Studio blocks and components before custom markup.
+- Import Vue components from @getdom/studio/vue.
+- Import @getdom/studio/headless to register headless custom elements.
+- Use dom-* custom elements for framework-neutral behavior.
+- Let DOM Studio handle overlay, focus, keyboard, selection, toast, and form behavior.
+- Return Studio specs when generated UI should remain editable.
+EOF