@mosetta/ui 0.0.0-stage → 0.0.10

package/CHANGELOG.md

@@ -0,0 +1,66 @@
+# @mosetta/ui
+
+## 0.0.10
+
+### Patch Changes
+
+- @mosetta/core@0.0.10
+- @mosetta/di@0.0.10
+
+## 0.0.9
+
+### Patch Changes
+
+- @mosetta/core@0.0.9
+- @mosetta/di@0.0.9
+
+## 0.0.8
+
+### Patch Changes
+
+- Updated dependencies
+  - @mosetta/core@0.0.8
+  - @mosetta/di@0.0.8
+
+## 0.0.7
+
+### Patch Changes
+
+- Updated dependencies
+  - @mosetta/core@0.0.7
+  - @mosetta/di@0.0.7
+
+## 0.0.6
+
+### Patch Changes
+
+- @mosetta/core@0.0.6
+- @mosetta/di@0.0.6
+
+## 0.0.5
+
+### Patch Changes
+
+- @mosetta/core@0.0.5
+- @mosetta/di@0.0.5
+
+## 0.0.4
+
+### Patch Changes
+
+- @mosetta/core@0.0.4
+- @mosetta/di@0.0.4
+
+## 0.0.3
+
+### Patch Changes
+
+- @mosetta/core@0.0.3
+- @mosetta/di@0.0.3
+
+## 0.0.2
+
+### Patch Changes
+
+- @mosetta/core@0.0.2
+- @mosetta/di@0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 mosetta contributors
+
+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

@@ -1,3 +1,5 @@
-# Temporary Holding Version
+# @mosetta/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The base CSS of mosetta's blocks: prefix-scoped primitives (typography, buttons, inputs, forms,
+cards, stacks, inline fields, the styler's classes) and the theme's CSS variables. Each sheet is its
+own entry (`@mosetta/ui/button.css`, …), so a block brings only the sheets it uses.

package/css/base.css

@@ -0,0 +1,109 @@
+/* GENERATED by scripts/buildCss.mjs — do not edit. Source: styles/theme.css */
+
+/* @mosetta/ui theme + SCOPED preflight . Everything lives under .dui-root —
+ * NO global selectors: the editor shares one document with the page being edited, and a global
+ * reset would pollute foreign protocol space. Components must render inside a .dui-root element. */
+
+.dui-root {
+  /* shadcn-style palette (light), dui-prefixed vars — the tailwind theme maps color utilities here.
+     Every value comes from the THEME ROLE around the block when there is one (@mosetta/core
+     theme.ts: `--theme-<role>`), and is the kit's own look where there is none — the editor's own
+     UI wears no theme, so it never changes with the page being edited. */
+  --dui-background: var(--theme-background, #ffffff);
+  --dui-foreground: var(--theme-text, #09090b);
+  --dui-card: var(--theme-background, #ffffff);
+  --dui-card-foreground: var(--theme-text, #09090b);
+  --dui-primary: var(--theme-primary, #18181b);
+  --dui-primary-foreground: var(--theme-primary-text, #fafafa);
+  --dui-secondary: var(--theme-muted, #f4f4f5);
+  --dui-secondary-foreground: var(--theme-text, #18181b);
+  --dui-muted: var(--theme-muted, #f4f4f5);
+  --dui-muted-foreground: var(--theme-muted-text, #71717a);
+  --dui-accent: var(--theme-muted, #f4f4f5);
+  --dui-accent-foreground: var(--theme-text, #18181b);
+  --dui-destructive: #dc2626;
+  --dui-destructive-foreground: #fafafa;
+  --dui-border: var(--theme-border, #e4e4e7);
+  --dui-input: var(--theme-border, #e4e4e7);
+  --dui-ring: var(--theme-primary, #18181b);
+  --dui-radius: var(--theme-radius, 0.5rem);
+}
+
+/* The INHERITED defaults, at zero specificity on purpose. A protocol module has no shared
+ * ancestor to put the palette on, so every one of them wears .dui-root ITSELF — and then a rule
+ * here and a utility class on the same element carry the same weight, leaving the winner to
+ * whichever stylesheet the page happened to load last. That is how a dark button ended up with
+ * dark text. `:where` takes this rule out of the contest: it is what applies when nothing else
+ * says otherwise, which is all a default should ever be. */
+:where(.dui-root) {
+  color: var(--dui-foreground);
+  font-family: var(--theme-font-body, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+  font-size: 14px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* headings take the theme's heading font — on a block that IS a heading and on one inside a block;
+ * zero weight like every default here */
+:where(.dui-root):where(h1, h2, h3, h4, h5, h6),
+:where(.dui-root) :where(h1, h2, h3, h4, h5, h6) {
+  font-family: var(--theme-font-heading, inherit);
+}
+
+/* The mini-preflight: the subset of tailwind's reset our primitives rely on, and the SAME rule as
+ * above applies to it — a reset is a default, and a default must never outweigh a utility. Written
+ * with an ancestor class it would carry MORE weight than the utilities it is meant to yield to:
+ * `.dui-root h2 { font-size: inherit }` beats `.dui:text-3xl`, and a heading inside a card would
+ * quietly lose its size. `:where` keeps the whole layer at zero. */
+:where(.dui-root) *,
+:where(.dui-root) ::before,
+:where(.dui-root) ::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: var(--dui-border);
+  margin: 0;
+  padding: 0;
+}
+
+:where(.dui-root) :where(h1, h2, h3, h4, p) {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+:where(.dui-root) :where(button, input, select, textarea) {
+  font: inherit;
+  color: inherit;
+  background: transparent;
+}
+
+:where(.dui-root) :where(button) {
+  appearance: none;
+}
+
+/* The native select arrow sits wherever the browser draws it — flush against the right border,
+ * and no padding moves it. The arrow is ours instead: an inset chevron that the control's own
+ * right padding (editorForm.select) keeps clear of the text. */
+:where(.dui-root) :where(select) {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  background-size: 1rem 1rem;
+}
+
+:where(.dui-root) :where(img, svg) {
+  display: block;
+  max-width: 100%;
+}
+
+:where(.dui-root) :where(a) {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/* a link inside text takes the theme's accent; with no theme around, the colour of its text — LAST
+ * on purpose: it weighs as little as the reset of every anchor above, so it must come after it */
+:where(.dui-root) :where(a.dui-inline-link) {
+  color: var(--theme-accent, currentColor);
+}

package/css/button.css

@@ -0,0 +1,264 @@
+/* GENERATED by scripts/buildCss.mjs — do not edit. Source: src/components/button.tsx */
+
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties;
+.dui-root {
+  --dui-spacing: 0.25rem;
+  --dui-text-xs: 0.75rem;
+  --dui-text-xs--line-height: calc(1 / 0.75);
+  --dui-text-sm: 0.875rem;
+  --dui-text-sm--line-height: calc(1.25 / 0.875);
+  --dui-font-weight-medium: 500;
+  --dui-default-transition-duration: 150ms;
+  --dui-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+.dui\:inline-flex {
+  display: inline-flex;
+}
+.dui\:h-8 {
+  height: calc(var(--dui-spacing) * 8);
+}
+.dui\:h-9 {
+  height: calc(var(--dui-spacing) * 9);
+}
+.dui\:h-10 {
+  height: calc(var(--dui-spacing) * 10);
+}
+.dui\:w-9 {
+  width: calc(var(--dui-spacing) * 9);
+}
+.dui\:shrink-0 {
+  flex-shrink: 0;
+}
+.dui\:cursor-pointer {
+  cursor: pointer;
+}
+.dui\:items-center {
+  align-items: center;
+}
+.dui\:justify-center {
+  justify-content: center;
+}
+.dui\:gap-2 {
+  gap: calc(var(--dui-spacing) * 2);
+}
+.dui\:rounded-md {
+  border-radius: calc(var(--dui-radius) - 2px);
+}
+.dui\:border {
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+}
+.dui\:border-input {
+  border-color: var(--dui-input);
+}
+.dui\:bg-background {
+  background-color: var(--dui-background);
+}
+.dui\:bg-destructive {
+  background-color: var(--dui-destructive);
+}
+.dui\:bg-primary {
+  background-color: var(--dui-primary);
+}
+.dui\:bg-secondary {
+  background-color: var(--dui-secondary);
+}
+.dui\:px-3 {
+  padding-inline: calc(var(--dui-spacing) * 3);
+}
+.dui\:px-4 {
+  padding-inline: calc(var(--dui-spacing) * 4);
+}
+.dui\:px-8 {
+  padding-inline: calc(var(--dui-spacing) * 8);
+}
+.dui\:py-2 {
+  padding-block: calc(var(--dui-spacing) * 2);
+}
+.dui\:text-sm {
+  font-size: var(--dui-text-sm);
+  line-height: var(--tw-leading, var(--dui-text-sm--line-height));
+}
+.dui\:text-xs {
+  font-size: var(--dui-text-xs);
+  line-height: var(--tw-leading, var(--dui-text-xs--line-height));
+}
+.dui\:font-medium {
+  --tw-font-weight: var(--dui-font-weight-medium);
+  font-weight: var(--dui-font-weight-medium);
+}
+.dui\:whitespace-nowrap {
+  white-space: nowrap;
+}
+.dui\:text-destructive-foreground {
+  color: var(--dui-destructive-foreground);
+}
+.dui\:text-primary {
+  color: var(--dui-primary);
+}
+.dui\:text-primary-foreground {
+  color: var(--dui-primary-foreground);
+}
+.dui\:text-secondary-foreground {
+  color: var(--dui-secondary-foreground);
+}
+.dui\:no-underline {
+  text-decoration-line: none;
+}
+.dui\:underline-offset-4 {
+  text-underline-offset: 4px;
+}
+.dui\:transition-colors {
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+  transition-timing-function: var(--tw-ease, var(--dui-default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--dui-default-transition-duration));
+}
+.dui\:outline-none {
+  --tw-outline-style: none;
+  outline-style: none;
+}
+@media (hover: hover) {
+  .dui\:hover\:bg-accent:hover {
+    background-color: var(--dui-accent);
+  }
+  .dui\:hover\:bg-destructive\/90:hover {
+    background-color: var(--dui-destructive);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .dui\:hover\:bg-destructive\/90:hover {
+      background-color: color-mix(in oklab, var(--dui-destructive) 90%, transparent);
+    }
+  }
+  .dui\:hover\:bg-primary\/90:hover {
+    background-color: var(--dui-primary);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .dui\:hover\:bg-primary\/90:hover {
+      background-color: color-mix(in oklab, var(--dui-primary) 90%, transparent);
+    }
+  }
+  .dui\:hover\:bg-secondary\/80:hover {
+    background-color: var(--dui-secondary);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .dui\:hover\:bg-secondary\/80:hover {
+      background-color: color-mix(in oklab, var(--dui-secondary) 80%, transparent);
+    }
+  }
+  .dui\:hover\:text-accent-foreground:hover {
+    color: var(--dui-accent-foreground);
+  }
+  .dui\:hover\:underline:hover {
+    text-decoration-line: underline;
+  }
+}
+.dui\:focus-visible\:ring-2:focus-visible {
+  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.dui\:focus-visible\:ring-ring:focus-visible {
+  --tw-ring-color: var(--dui-ring);
+}
+.dui\:disabled\:pointer-events-none:disabled {
+  pointer-events: none;
+}
+.dui\:disabled\:opacity-50:disabled {
+  opacity: 50%;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-border-style: solid;
+      --tw-font-weight: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+    }
+  }
+}

package/css/card.css

@@ -0,0 +1,174 @@
+/* GENERATED by scripts/buildCss.mjs — do not edit. Source: src/components/card.tsx */
+
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties;
+.dui-root {
+  --dui-spacing: 0.25rem;
+  --dui-text-sm: 0.875rem;
+  --dui-text-sm--line-height: calc(1.25 / 0.875);
+  --dui-font-weight-semibold: 600;
+  --dui-tracking-tight: -0.025em;
+}
+.dui\:flex {
+  display: flex;
+}
+.dui\:flex-col {
+  flex-direction: column;
+}
+.dui\:items-center {
+  align-items: center;
+}
+.dui\:gap-1\.5 {
+  gap: calc(var(--dui-spacing) * 1.5);
+}
+.dui\:rounded-xl {
+  border-radius: calc(var(--dui-radius) + 4px);
+}
+.dui\:border {
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+}
+.dui\:border-border {
+  border-color: var(--dui-border);
+}
+.dui\:bg-card {
+  background-color: var(--dui-card);
+}
+.dui\:p-6 {
+  padding: calc(var(--dui-spacing) * 6);
+}
+.dui\:pt-0 {
+  padding-top: 0px;
+}
+.dui\:text-sm {
+  font-size: var(--dui-text-sm);
+  line-height: var(--tw-leading, var(--dui-text-sm--line-height));
+}
+.dui\:leading-none {
+  --tw-leading: 1;
+  line-height: 1;
+}
+.dui\:font-semibold {
+  --tw-font-weight: var(--dui-font-weight-semibold);
+  font-weight: var(--dui-font-weight-semibold);
+}
+.dui\:tracking-tight {
+  --tw-tracking: var(--dui-tracking-tight);
+  letter-spacing: var(--dui-tracking-tight);
+}
+.dui\:text-card-foreground {
+  color: var(--dui-card-foreground);
+}
+.dui\:text-muted-foreground {
+  color: var(--dui-muted-foreground);
+}
+.dui\:shadow-sm {
+  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-border-style: solid;
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+      --tw-tracking: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+    }
+  }
+}