@duskmoon-dev/components 0.4.0 → 0.5.0

package/dist/infrastructure.js

@@ -4,7 +4,7 @@
 import { useCallback, useState } from "react";
 
 // src/generated/version.ts
-var version = "0.4.0";
+var version = "0.5.0";
 
 // src/infrastructure.ts
 var theme = {

package/dist/styles.css

@@ -25543,7 +25543,8 @@ html {
     overflow: hidden;
   }
 
-  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box) .modal-header {
+  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box)
+    .modal-header {
     display: flex;
     align-items: flex-start;
     gap: 16px;
@@ -25551,7 +25552,8 @@ html {
     border-block-end: 1px solid var(--color-outline-variant);
   }
 
-  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box) .modal-title {
+  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box)
+    .modal-title {
     margin: 0;
     color: var(--color-on-surface);
     font-size: 1rem;
@@ -25559,7 +25561,8 @@ html {
     line-height: 1.4;
   }
 
-  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box) .modal-body {
+  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box)
+    .modal-body {
     flex: 1 1 auto;
     min-height: 0;
     padding: 20px;
@@ -25568,7 +25571,8 @@ html {
     line-height: 1.5;
   }
 
-  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box) .modal-footer {
+  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box)
+    .modal-footer {
     display: flex;
     justify-content: flex-end;
     gap: 8px;
@@ -25580,7 +25584,9 @@ html {
     margin-top: 0;
   }
 
-  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box) .modal-footer > button {
+  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box)
+    .modal-footer
+    > button {
     min-height: 2.25rem;
     padding: 0 14px;
     color: var(--color-on-surface);
@@ -25592,18 +25598,23 @@ html {
     cursor: pointer;
   }
 
-  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box) .modal-footer > button:last-child {
+  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box)
+    .modal-footer
+    > button:last-child {
     color: var(--color-primary-content);
     background: var(--color-primary);
     border-color: var(--color-primary);
   }
 
-  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box) .modal-footer > button:disabled {
+  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box)
+    .modal-footer
+    > button:disabled {
     cursor: not-allowed;
     opacity: 0.55;
   }
 
-  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box) .modal-close {
+  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box)
+    .modal-close {
     position: absolute;
     top: 12px;
     right: 12px;
@@ -25622,8 +25633,10 @@ html {
     cursor: pointer;
   }
 
-  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box) .modal-close:hover,
-  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box) .modal-close:focus-visible {
+  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box)
+    .modal-close:hover,
+  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box)
+    .modal-close:focus-visible {
     color: var(--color-on-surface);
     background: var(--color-surface-container);
     outline: none;
@@ -29163,3 +29176,292 @@ html {
     );
   }
 }
+
+/* JSON Schema renderer layout. */
+.schema-form {
+  max-width: none;
+}
+
+.schema-form .schema-object,
+.schema-form .schema-array {
+  display: grid;
+  gap: 1rem;
+  min-width: 0;
+  margin: 0;
+  padding: 1rem;
+  border: 1px solid var(--color-outline, currentColor);
+  border-radius: 8px;
+}
+
+.schema-form > .schema-object {
+  padding: 0;
+  border: 0;
+}
+
+.schema-form .schema-object legend,
+.schema-form .schema-array legend {
+  padding: 0 0.25rem;
+  color: var(--color-on-surface);
+  font-weight: 700;
+}
+
+.schema-form .schema-choice-group {
+  display: grid;
+  gap: 0.5rem;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.schema-form .schema-choice-group legend {
+  margin-bottom: 0.5rem;
+  padding: 0;
+  color: var(--color-on-surface);
+  font-weight: 500;
+}
+
+.schema-form .schema-choice-options {
+  display: grid;
+  justify-items: start;
+  gap: 0.75rem;
+  min-width: 0;
+}
+
+.schema-form .schema-choice-horizontal .schema-choice-options {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem 1rem;
+}
+
+.schema-form .schema-choice-options > label {
+  max-width: 100%;
+  overflow-wrap: anywhere;
+}
+
+.schema-form .schema-choice-group .schema-field-error {
+  margin: 0;
+  font-size: 0.75rem;
+}
+
+.schema-form .schema-required::before {
+  margin-right: 0.25rem;
+  color: var(--color-error);
+  content: "*";
+}
+
+.schema-form .schema-description,
+.schema-form .form-item-extra {
+  margin: 0;
+  color: var(--color-on-surface-variant);
+  font-size: 0.75rem;
+  line-height: 1.4;
+}
+
+.schema-form .form-item-extra p,
+.schema-form .form-item-help p {
+  margin: 0;
+}
+
+.schema-form .schema-array-item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.schema-form .schema-array-item > .schema-array-remove {
+  grid-column: 2;
+  grid-row: 1;
+  align-self: center;
+}
+
+.schema-form .schema-array-remove svg {
+  display: block;
+}
+
+/* Share the label and control rows so wrapped labels keep actions aligned. */
+.schema-form .schema-array-item:has(> .form-item) {
+  grid-template-rows: auto;
+  row-gap: 0.375rem;
+}
+
+.schema-form
+  .schema-array-item:has(
+    > .form-item > :is(.form-item-help, .form-item-extra)
+  ) {
+  grid-template-rows: auto auto;
+}
+
+.schema-form
+  .schema-array-item:has(> .form-item > .form-item-help):has(
+    > .form-item > .form-item-extra
+  ) {
+  grid-template-rows: auto auto auto;
+}
+
+.schema-form .schema-array-item:has(> .form-item > .form-item-label) {
+  grid-template-rows: auto auto;
+}
+
+.schema-form
+  .schema-array-item:has(> .form-item > .form-item-label):has(
+    > .form-item > :is(.form-item-help, .form-item-extra)
+  ) {
+  grid-template-rows: auto auto auto;
+}
+
+.schema-form
+  .schema-array-item:has(> .form-item > .form-item-label):has(
+    > .form-item > .form-item-help
+  ):has(> .form-item > .form-item-extra) {
+  grid-template-rows: auto auto auto auto;
+}
+
+.schema-form .schema-array-item > .form-item {
+  grid-column: 1;
+  grid-row: 1 / -1;
+  grid-template-rows: subgrid;
+}
+
+.schema-form .schema-array-item > .form-item > .form-item-control {
+  align-self: center;
+}
+
+.schema-form
+  .schema-array-item:has(> .form-item > .form-item-label)
+  > .schema-array-remove {
+  grid-row: 2;
+}
+
+.schema-form .schema-array > button {
+  justify-self: start;
+}
+
+.schema-form .schema-form-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.schema-form [role="alert"] {
+  color: var(--color-error, #b42318);
+}
+
+/* Schema fields own their labels, including composite workflow controls. */
+.schema-form .schema-specialized-field {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.schema-form .schema-specialized-field > legend {
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+}
+.schema-form .schema-widget {
+  min-width: 0;
+}
+.schema-form .schema-widget-value {
+  margin: 0.5rem 0 0;
+  overflow-wrap: anywhere;
+  font-size: 0.75rem;
+  color: var(--color-on-surface-variant);
+}
+.schema-form .schema-widget > :is(.cascader-container, .tree-select) {
+  width: 100%;
+}
+
+/* Composer state and layout are independent from conversation rows. */
+.chat-composer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  min-width: 0;
+  padding: 0.75rem;
+  border: 1px solid var(--color-outline-variant);
+  border-radius: var(--radius-box, 0.75rem);
+  background: var(--color-surface);
+  color: var(--color-on-surface);
+}
+
+.chat-composer .chat-composer-editor {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 0;
+  max-height: none;
+  resize: none;
+  line-height: 1.5rem;
+}
+
+.chat-composer-actions,
+.chat-composer-attachments {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.chat-composer-attachments,
+.chat-composer-completions {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.chat-composer-attachment {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  min-width: 0;
+  max-width: 100%;
+  padding: 0.375rem;
+  border-radius: var(--radius-sm, 0.375rem);
+  background: var(--color-surface-container);
+}
+
+.chat-composer-attachment img {
+  width: 2.5rem;
+  height: 2.5rem;
+  object-fit: cover;
+  border-radius: var(--radius-sm, 0.375rem);
+}
+
+.chat-composer-filename {
+  overflow-wrap: anywhere;
+}
+
+.chat-composer-completions {
+  max-height: 12rem;
+  overflow-y: auto;
+  border: 1px solid var(--color-outline-variant);
+  border-radius: var(--radius-sm, 0.375rem);
+}
+
+.chat-composer-completions [role="option"] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+}
+
+.chat-composer-completions [aria-selected="true"] {
+  background: var(--color-primary-container);
+  color: var(--color-on-primary-container);
+}
+
+.chat-composer-completions [aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.chat-composer-description {
+  font-size: 0.875rem;
+}
+
+.chat-composer-error {
+  color: var(--color-error);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duskmoon-dev/components",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -419,7 +419,11 @@
       "import": "./dist/components/swap/index.js",
       "types": "./dist/components/swap/index.d.ts"
     },
-    "./styles.css": "./dist/styles.css"
+    "./styles.css": "./dist/styles.css",
+    "./json-schema-form": {
+      "import": "./dist/components/json-schema-form/index.js",
+      "types": "./dist/components/json-schema-form/index.d.ts"
+    }
   },
   "files": [
     "dist",
@@ -476,7 +480,9 @@
     "clsx": "^2.1.1",
     "react-markdown": "^10.1.0",
     "remark-breaks": "^4.0.0",
-    "remark-gfm": "^4.0.1"
+    "remark-gfm": "^4.0.1",
+    "ajv": "^8.20.0",
+    "ajv-formats": "^3.0.1"
   },
   "devDependencies": {
     "@duskmoon-dev/core": "1.20.3",