@odori/cli 0.0.7 → 0.0.9

package/studio/src/studio.css

@@ -344,9 +344,176 @@ a.button {
 }
 /* Right-aligned: the trigger is the last thing in the header, so a menu
    growing rightward from its left edge would leave the window. */
-.settings-menu {
-  left: auto;
-  right: 0;
+/* The settings dialog: pages down the left, one page's controls on the right. */
+.settings-dialog {
+  background: var(--elevated);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow);
+  display: flex;
+  /* One size regardless of the page shown: a dialog that grows and shrinks
+     as you switch pages reads as two dialogs. The body scrolls instead. */
+  height: min(480px, 82vh);
+  overflow: hidden;
+  width: min(640px, 92vw);
+}
+.settings-nav {
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  flex: none;
+  gap: 2px;
+  padding: 14px 10px;
+  width: 168px;
+}
+.settings-nav-title {
+  color: var(--subtle);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  margin: 0 0 8px;
+  padding: 0 8px;
+  text-transform: uppercase;
+}
+.settings-nav-item {
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  padding: 7px 8px;
+  text-align: left;
+}
+.settings-nav-item:hover {
+  color: var(--foreground);
+}
+.settings-nav-item[data-selected="true"] {
+  background: var(--active);
+  color: var(--foreground);
+}
+.settings-body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 18px;
+  min-width: 0;
+  overflow-y: auto;
+  padding: 14px 18px 20px;
+}
+.settings-body-head {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}
+.settings-body-title {
+  font-size: 15px;
+  font-weight: 600;
+  margin: 0;
+}
+.settings-group {
+  display: grid;
+  gap: 8px;
+}
+.settings-group-title {
+  color: var(--subtle);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  margin: 0;
+  text-transform: uppercase;
+}
+.settings-options {
+  display: grid;
+  gap: 2px;
+}
+.settings-option {
+  align-items: baseline;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--muted);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  font-size: 13px;
+  gap: 10px;
+  justify-content: space-between;
+  padding: 7px 9px;
+  text-align: left;
+}
+.settings-option:hover {
+  color: var(--foreground);
+}
+.settings-option[data-selected="true"] {
+  background: var(--active);
+  color: var(--foreground);
+}
+.settings-option-hint {
+  color: var(--subtle);
+  font-size: 11px;
+}
+.settings-note {
+  color: var(--subtle);
+  font-size: 12px;
+  line-height: 1.5;
+  margin: 0;
+}
+.settings-provider {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  display: grid;
+  gap: 10px;
+  padding: 12px 14px;
+}
+.settings-provider-head {
+  align-items: center;
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+}
+.settings-provider-id {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+}
+.settings-provider-name {
+  font-size: 13px;
+  font-weight: 600;
+}
+.settings-provider-sub {
+  align-items: center;
+  color: var(--subtle);
+  display: flex;
+  font-size: 12px;
+  gap: 6px;
+}
+.settings-provider-sub a {
+  color: inherit;
+}
+.settings-provider-dot {
+  background: var(--subtle);
+  border-radius: 999px;
+  flex: none;
+  height: 6px;
+  width: 6px;
+}
+.settings-provider-sub[data-tone="ok"] .settings-provider-dot {
+  background: var(--success);
+}
+.settings-provider-form {
+  display: flex;
+  gap: 8px;
+}
+.settings-integration-input {
+  flex: 1;
+  min-width: 0;
+  background: var(--field, transparent);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: inherit;
+  font: inherit;
+  font-size: 12px;
+  padding: 6px 10px;
 }
 .menu-heading {
   color: var(--subtle);
@@ -1894,3 +2061,109 @@ html[data-inspector="collapsed"] .main:not([data-single="true"]) {
   margin-left: auto;
   text-transform: uppercase;
 }
+
+/* Integrations: one provider per row, the key one-way by design. */
+.integrations-view {
+  max-width: 640px;
+  padding: 24px;
+  display: grid;
+  gap: 16px;
+}
+
+.integration-list {
+  list-style: none;
+  margin: 12px 0 0;
+  padding: 0;
+  display: grid;
+  gap: 12px;
+}
+
+.integration {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 14px 16px;
+  display: grid;
+  gap: 10px;
+}
+
+.integration-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.integration-title {
+  font-weight: 600;
+}
+
+.integration-docs {
+  margin-left: auto;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.integration-form {
+  display: flex;
+  gap: 8px;
+}
+
+.integration-input {
+  flex: 1;
+  min-width: 0;
+  background: var(--field, transparent);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 6px 10px;
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+}
+
+.integration-usage {
+  margin: 0;
+  font-size: 12px;
+  color: var(--muted);
+  overflow-x: auto;
+}
+
+/* Generate: prompt to registered role, the terminal's numbers rendered. */
+.generate-prompt {
+  width: 100%;
+  resize: vertical;
+  background: var(--field, transparent);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 8px 10px;
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+}
+
+.generate-controls {
+  display: flex;
+  align-items: end;
+  gap: 10px;
+}
+
+.generate-field {
+  display: grid;
+  gap: 4px;
+  font-size: 11px;
+  color: var(--muted);
+}
+
+.generate-field input {
+  background: var(--field, transparent);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 5px 8px;
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+  width: 120px;
+}
+
+.generate-report {
+  display: grid;
+  gap: 8px;
+}

package/studio/src/views/AssetsView.tsx

@@ -2,6 +2,7 @@ import {resolveEntryLayout} from "odori";
 import {project, videos} from "virtual:odori-project";
 import {AudioClip} from "../components/AudioClip";
 import {Empty, SectionTitle} from "../components/ui";
+import {GenerateBed} from "../components/GenerateBed";
 
 const isImage = (url: string) => /\.(png|jpe?g|gif|svg|webp|avif)$/i.test(url);
 const isAudio = (url: string) => /\.(m4a|mp3|wav|aac|ogg|opus|flac)$/i.test(url);
@@ -88,6 +89,11 @@ export const AssetsView = () => {
         )}
       </section>
 
+      <section>
+        <SectionTitle>Generate a bed</SectionTitle>
+        <GenerateBed />
+      </section>
+
       <section>
         <SectionTitle>Fonts</SectionTitle>
         {/* Studio's own chrome never loaded these faces, so a name rendered in

package/studio/src/virtual.d.ts

@@ -17,6 +17,7 @@ declare module "virtual:odori-project" {
     exportDir: string;
     audioDir: string;
     audio: Array<{name: string; url: string; relativeFile: string; bytes: number}>;
+    version: string;
     sourceHash: string;
     assets: Array<{reference: string; url: string}>;
     files: {