@orion-studios/cms 0.5.0

package/dist/studio/styles.css

@@ -0,0 +1,444 @@
+/* Orion Studio v2 — self-contained styles (ost- prefix) */
+
+.ost-root {
+  --ost-bg: #f6f7f9;
+  --ost-panel: #ffffff;
+  --ost-ink: #1c2433;
+  --ost-muted: #6b7486;
+  --ost-line: #e3e6ec;
+  --ost-accent: #243654;
+  --ost-accent-contrast: #ffffff;
+  --ost-danger: #b3372f;
+  --ost-live: #1e7f4f;
+  display: flex;
+  min-height: 100dvh;
+  background: var(--ost-bg);
+  color: var(--ost-ink);
+  font: 14px/1.45 system-ui, -apple-system, 'Segoe UI', sans-serif;
+}
+
+.ost-muted { color: var(--ost-muted); font-size: 12.5px; }
+.ost-error { color: var(--ost-danger); font-size: 13px; }
+.ost-loading { display: grid; place-items: center; min-height: 40vh; color: var(--ost-muted); }
+.ost-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
+
+/* Inputs */
+.ost-label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; margin-bottom: 10px; }
+.ost-label.ost-checkbox { grid-auto-flow: column; justify-content: start; align-items: center; gap: 8px; }
+.ost-input {
+  font: inherit; font-weight: 400; color: var(--ost-ink);
+  border: 1px solid var(--ost-line); border-radius: 8px;
+  padding: 8px 10px; background: #fff; width: 100%;
+}
+.ost-input:focus { outline: 2px solid color-mix(in srgb, var(--ost-accent) 30%, transparent); border-color: var(--ost-accent); }
+.ost-textarea { min-height: 84px; resize: vertical; }
+.ost-fieldset { border: 1px solid var(--ost-line); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }
+.ost-fieldset legend { font-size: 12px; font-weight: 700; padding: 0 4px; color: var(--ost-muted); text-transform: uppercase; letter-spacing: 0.04em; }
+
+/* Buttons */
+.ost-btn {
+  font: inherit; font-weight: 600; cursor: pointer;
+  border: 1px solid var(--ost-line); border-radius: 8px;
+  padding: 7px 12px; background: #fff; color: var(--ost-ink);
+  display: inline-flex; align-items: center; gap: 6px;
+}
+.ost-btn:hover { border-color: var(--ost-accent); }
+.ost-btn:disabled { opacity: 0.5; cursor: default; }
+.ost-btn-primary { background: var(--ost-accent); border-color: var(--ost-accent); color: var(--ost-accent-contrast); }
+.ost-btn-danger { color: var(--ost-danger); border-color: color-mix(in srgb, var(--ost-danger) 40%, transparent); }
+.ost-pill {
+  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
+  padding: 2px 8px; border-radius: 999px; background: var(--ost-line); color: var(--ost-muted);
+}
+.ost-pill.is-live { background: color-mix(in srgb, var(--ost-live) 15%, transparent); color: var(--ost-live); }
+
+/* Login */
+.ost-login {
+  display: grid; place-items: center; min-height: 100dvh; padding: 24px;
+  background:
+    radial-gradient(1100px 560px at 12% -10%, color-mix(in srgb, var(--ost-accent) 16%, transparent), transparent 60%),
+    radial-gradient(900px 520px at 108% 112%, color-mix(in srgb, var(--ost-accent) 12%, transparent), transparent 55%),
+    var(--ost-bg);
+}
+.ost-login-card {
+  width: min(400px, 92vw); background: var(--ost-panel); border: 1px solid var(--ost-line);
+  border-radius: 16px; padding: 36px 32px 24px; display: grid; gap: 4px;
+  box-shadow: 0 1px 2px rgba(28, 36, 51, 0.06), 0 24px 60px -18px rgba(28, 36, 51, 0.25);
+  animation: ost-login-in 0.35s ease-out;
+}
+@keyframes ost-login-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: none; }
+}
+.ost-login-logo {
+  width: auto; max-width: min(280px, 80%); max-height: 96px; height: auto;
+  justify-self: center; margin-bottom: 16px; object-fit: contain;
+}
+.ost-login-heading { text-align: center; margin-bottom: 18px; display: grid; gap: 4px; }
+.ost-login-heading h1 { margin: 0; font-size: 21px; letter-spacing: -0.01em; }
+.ost-login .ost-label { margin-bottom: 14px; gap: 6px; }
+.ost-login .ost-input { padding: 10px 12px; border-radius: 10px; }
+.ost-login-error {
+  color: var(--ost-danger); font-size: 13px; font-weight: 500;
+  background: color-mix(in srgb, var(--ost-danger) 8%, transparent);
+  border: 1px solid color-mix(in srgb, var(--ost-danger) 25%, transparent);
+  border-radius: 10px; padding: 9px 12px; margin-bottom: 12px;
+}
+.ost-login-submit {
+  width: 100%; justify-content: center; padding: 11px 14px; border-radius: 10px;
+  font-size: 14.5px; transition: filter 0.15s ease, transform 0.05s ease;
+}
+.ost-login-submit:hover:not(:disabled) { filter: brightness(1.12); }
+.ost-login-submit:active:not(:disabled) { transform: translateY(1px); }
+.ost-login-submit:disabled { opacity: 0.7; cursor: default; }
+.ost-login-foot {
+  margin: 18px 0 0; text-align: center; font-size: 11.5px; color: var(--ost-muted);
+  letter-spacing: 0.02em;
+}
+
+/* Users admin */
+.ost-notice {
+  color: var(--ost-live); font-size: 13px; font-weight: 500;
+  background: color-mix(in srgb, var(--ost-live) 9%, transparent);
+  border: 1px solid color-mix(in srgb, var(--ost-live) 25%, transparent);
+  border-radius: 10px; padding: 9px 12px; margin-bottom: 12px;
+}
+.ost-user-row { cursor: default; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
+.ost-user-id { display: grid; gap: 2px; min-width: 0; }
+.ost-user-id strong { overflow: hidden; text-overflow: ellipsis; }
+.ost-user-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.ost-role-select { width: auto; padding: 6px 8px; }
+.ost-role-legend { margin-top: 16px; display: grid; gap: 4px; }
+.ost-role-legend p { margin: 0; }
+
+/* Password field with reveal toggle */
+.ost-password { position: relative; }
+.ost-password .ost-input { padding-right: 40px; }
+.ost-password-toggle {
+  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
+  display: grid; place-items: center; width: 30px; height: 30px;
+  border: 0; border-radius: 7px; background: transparent; cursor: pointer;
+  color: var(--ost-muted); padding: 0;
+}
+.ost-password-toggle:hover { color: var(--ost-ink); background: color-mix(in srgb, var(--ost-ink) 7%, transparent); }
+
+/* Shell */
+.ost-nav {
+  width: 224px; flex-shrink: 0; background: var(--ost-accent); color: #fff;
+  display: flex; flex-direction: column; gap: 2px; padding: 16px 10px;
+  position: sticky; top: 0; height: 100dvh;
+}
+.ost-brand { display: flex; gap: 10px; align-items: center; padding: 6px 10px 18px; }
+.ost-brand img { height: 30px; width: auto; }
+.ost-brand strong { display: block; font-size: 14px; }
+.ost-brand .ost-muted { color: rgba(255, 255, 255, 0.55); }
+.ost-nav-item {
+  font: inherit; font-weight: 600; text-align: left; cursor: pointer;
+  background: none; border: none; color: rgba(255, 255, 255, 0.75);
+  padding: 9px 12px; border-radius: 8px;
+}
+.ost-nav-item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
+.ost-nav-item.is-active { background: rgba(255, 255, 255, 0.14); color: #fff; }
+.ost-nav-footer { margin-top: auto; display: grid; gap: 6px; padding: 10px; }
+.ost-nav-footer .ost-muted { color: rgba(255, 255, 255, 0.55); overflow: hidden; text-overflow: ellipsis; }
+.ost-nav-footer .ost-btn { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.25); justify-content: center; }
+.ost-nav-footer .ost-pill { justify-self: start; background: rgba(255, 255, 255, 0.14); color: #fff; }
+
+.ost-main { flex: 1; min-width: 0; }
+.ost-view { padding: 26px 30px; max-width: 1060px; }
+.ost-view-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 12px; }
+.ost-view-header h2 { margin: 0 0 2px; font-size: 20px; }
+.ost-view-header p { margin: 0; }
+
+.ost-card { background: var(--ost-panel); border: 1px solid var(--ost-line); border-radius: 12px; padding: 14px 16px; }
+.ost-list { display: grid; gap: 8px; }
+.ost-list-item {
+  font: inherit; text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
+  background: var(--ost-panel); border: 1px solid var(--ost-line); border-radius: 10px; padding: 12px 14px;
+}
+.ost-list-item:hover { border-color: var(--ost-accent); }
+.ost-list-item.is-active { border-color: var(--ost-accent); box-shadow: inset 3px 0 0 var(--ost-accent); }
+.ost-create-form { display: grid; gap: 4px; margin-bottom: 16px; max-width: 420px; }
+.ost-dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
+.ost-dashboard-card { font: inherit; cursor: pointer; text-align: left; padding: 22px 16px; }
+.ost-dashboard-card:hover { border-color: var(--ost-accent); }
+
+/* Editor */
+.ost-editor { display: flex; flex-direction: column; height: 100dvh; }
+.ost-editor-bar {
+  display: flex; gap: 10px; align-items: center; padding: 10px 14px;
+  background: var(--ost-panel); border-bottom: 1px solid var(--ost-line);
+}
+.ost-title-input { max-width: 380px; font-weight: 600; }
+.ost-editor-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
+.ost-editor-body { display: flex; flex: 1; min-height: 0; }
+.ost-canvas { flex: 1; overflow-y: auto; padding: 0 0 40px; background: #fff; }
+.ost-canvas-empty {
+  display: grid; gap: 12px; justify-items: center; padding: 60px 20px; margin: 22px;
+  border: 2px dashed var(--ost-line); border-radius: 14px; color: var(--ost-muted);
+}
+
+/* The page renders full-bleed exactly like the live site; chrome floats on top. */
+.ost-page { min-height: 40vh; }
+.ost-blockwrap { position: relative; }
+.ost-blockwrap::after {
+  content: ''; position: absolute; inset: 0; pointer-events: none;
+  outline: 2px solid transparent; outline-offset: -2px; transition: outline-color 120ms;
+  z-index: 5;
+}
+.ost-blockwrap:hover::after { outline-color: color-mix(in srgb, var(--ost-accent) 40%, transparent); }
+.ost-blockwrap.is-selected::after { outline-color: var(--ost-accent); }
+
+.ost-blockchrome {
+  position: absolute; top: 8px; left: 8px; right: 8px; z-index: 6;
+  display: flex; justify-content: space-between; align-items: flex-start;
+  opacity: 0; transition: opacity 120ms; pointer-events: none;
+}
+.ost-blockwrap:hover .ost-blockchrome,
+.ost-blockwrap.is-selected .ost-blockchrome { opacity: 1; pointer-events: auto; }
+.ost-blockchip {
+  font: inherit; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
+  cursor: pointer; border: none; border-radius: 6px; padding: 4px 10px;
+  background: var(--ost-accent); color: var(--ost-accent-contrast);
+  box-shadow: 0 2px 10px rgba(20, 26, 38, 0.25);
+}
+.ost-blockactions {
+  display: flex; gap: 4px; background: #fff; border-radius: 8px; padding: 3px;
+  box-shadow: 0 2px 10px rgba(20, 26, 38, 0.18); border: 1px solid var(--ost-line);
+}
+.ost-blockactions button {
+  font: inherit; cursor: pointer; background: none; border: none;
+  border-radius: 6px; padding: 3px 9px; color: var(--ost-muted);
+}
+.ost-blockactions button:hover:not(:disabled) { color: var(--ost-ink); background: var(--ost-bg); }
+.ost-blockactions button:disabled { opacity: 0.35; cursor: default; }
+.ost-block-fallback { padding: 30px; color: var(--ost-muted); text-align: center; }
+
+/* Inline editable text */
+[data-orion-inline] { cursor: text; transition: box-shadow 100ms; border-radius: 3px; }
+[data-orion-inline]:hover {
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.95),
+    0 0 0 3px color-mix(in srgb, var(--ost-accent) 55%, transparent);
+}
+[data-orion-inline]:focus {
+  outline: none;
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.98),
+    0 0 0 3px var(--ost-accent);
+  background: color-mix(in srgb, var(--ost-accent) 8%, transparent);
+}
+
+.ost-add-section {
+  font: inherit; font-weight: 600; cursor: pointer; color: var(--ost-muted);
+  border: 2px dashed var(--ost-line); border-radius: 12px; padding: 16px; background: none;
+  display: block; width: calc(100% - 44px); margin: 18px 22px 0;
+}
+.ost-add-section:hover { color: var(--ost-accent); border-color: var(--ost-accent); }
+
+.ost-sidebar-panel {
+  width: 320px; flex-shrink: 0; overflow-y: auto; padding: 18px;
+  background: var(--ost-panel); border-left: 1px solid var(--ost-line);
+}
+.ost-sidebar-panel h3 { margin: 0 0 14px; font-size: 15px; }
+
+/* Versions */
+.ost-versions { padding: 10px 14px; background: var(--ost-bg); border-bottom: 1px solid var(--ost-line); display: grid; gap: 6px; }
+.ost-version-row { display: flex; gap: 10px; align-items: center; font-size: 13px; }
+.ost-version-row .ost-btn { margin-left: auto; padding: 3px 10px; }
+
+/* Palette */
+.ost-palette { position: fixed; inset: 0; background: rgba(20, 26, 38, 0.45); display: grid; place-items: center; z-index: 60; }
+.ost-palette-card {
+  width: min(640px, 94vw); max-height: 80vh; overflow-y: auto;
+  background: #fff; border-radius: 14px; padding: 22px;
+}
+.ost-palette-card h3 { margin: 0 0 14px; }
+.ost-palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
+.ost-palette-item {
+  font: inherit; text-align: left; cursor: pointer; display: grid; gap: 4px;
+  border: 1px solid var(--ost-line); border-radius: 10px; padding: 12px; background: #fff;
+}
+.ost-palette-item:hover { border-color: var(--ost-accent); }
+.ost-palette-item span { color: var(--ost-muted); font-size: 12px; }
+
+/* Inspector extras */
+.ost-item { border: 1px solid var(--ost-line); border-radius: 8px; margin-bottom: 8px; }
+.ost-item summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 8px 10px; font-weight: 600; }
+.ost-item-body { padding: 10px; border-top: 1px solid var(--ost-line); }
+.ost-item-actions button {
+  font: inherit; cursor: pointer; background: none; border: 1px solid var(--ost-line);
+  border-radius: 6px; padding: 1px 7px; margin-left: 4px; color: var(--ost-muted);
+}
+
+/* Media */
+.ost-media-field { display: grid; gap: 8px; }
+.ost-media-thumb { width: 100%; border-radius: 8px; border: 1px solid var(--ost-line); display: block; }
+.ost-media-empty { padding: 24px; text-align: center; color: var(--ost-muted); border: 1px dashed var(--ost-line); border-radius: 8px; }
+.ost-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
+.ost-media-grid-lg { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
+.ost-media-cell { position: relative; cursor: pointer; border: 2px solid transparent; border-radius: 8px; overflow: hidden; padding: 0; background: var(--ost-line); }
+.ost-media-cell img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
+.ost-media-cell.is-selected { border-color: var(--ost-accent); }
+.ost-media-name { position: absolute; inset: auto 0 0; font-size: 10px; padding: 3px 6px; background: rgba(20, 26, 38, 0.65); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ost-media-upload { display: grid; place-items: center; cursor: pointer; aspect-ratio: 1; border: 2px dashed var(--ost-line); border-radius: 8px; color: var(--ost-muted); font-weight: 600; }
+.ost-media-upload:hover { color: var(--ost-accent); border-color: var(--ost-accent); }
+.ost-media-detail { margin-top: 14px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
+
+/* Globals */
+.ost-globals { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: start; }
+.ost-globals-nav { display: grid; gap: 6px; }
+.ost-globals-editor { background: var(--ost-panel); border: 1px solid var(--ost-line); border-radius: 12px; padding: 18px; }
+
+/* Submissions */
+.ost-submission summary { display: flex; justify-content: space-between; cursor: pointer; }
+.ost-submission-data { display: grid; gap: 6px; margin: 12px 0 0; }
+.ost-submission-data div { display: grid; grid-template-columns: 140px 1fr; gap: 10px; }
+.ost-submission-data dt { font-weight: 600; color: var(--ost-muted); }
+.ost-submission-data dd { margin: 0; }
+
+/* ---- v0.3 additions: forms manager, dashboard, settings, redirects ---- */
+
+.ost-nav-badge {
+  margin-left: auto; background: var(--ost-danger); color: #fff; border-radius: 999px;
+  font-size: 11px; font-weight: 700; padding: 1px 7px; min-width: 18px; text-align: center;
+}
+.ost-nav-item { display: flex; align-items: center; gap: 8px; }
+
+.ost-warn { color: var(--ost-danger); }
+.ost-grow { flex: 1; }
+.ost-inline-check { margin: 0; white-space: nowrap; }
+.ost-load-more { justify-content: center; margin-top: 14px; }
+
+/* Submissions */
+.ost-submission.is-unread { border-left: 3px solid var(--ost-accent); }
+.ost-unread-dot {
+  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
+  background: var(--ost-accent); margin-right: 7px; vertical-align: middle;
+}
+.ost-submission .ost-row { margin-top: 10px; }
+
+/* Forms manager */
+.ost-view-wide { max-width: 1280px; }
+.ost-form-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: default; }
+.ost-form-open { font: inherit; background: none; border: 0; cursor: pointer; text-align: left; padding: 0; color: inherit; }
+.ost-form-open:hover strong { text-decoration: underline; }
+.ost-form-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 22px; align-items: start; }
+.ost-form-config { min-width: 0; }
+.ost-form-preview { position: sticky; top: 20px; }
+.ost-form-preview h4 { margin: 0 0 8px; }
+.ost-form-preview-frame { background: var(--ost-panel); border: 1px solid var(--ost-line); border-radius: 12px; padding: 16px; }
+.ost-preview-form { display: grid; gap: 2px; }
+.ost-preview-label { font-size: 12.5px; font-weight: 600; display: block; margin-bottom: 4px; }
+.ost-preview-form .ocf-actions { margin-top: 8px; display: flex; gap: 8px; }
+.ost-preview-form .ocf-help { margin: 2px 0 0; font-size: 12px; color: var(--ost-muted); }
+
+/* Dashboard */
+.ost-dash-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; align-items: start; }
+.ost-dash-column { display: grid; gap: 14px; }
+.ost-dash-card { display: grid; gap: 6px; }
+.ost-dash-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
+.ost-dash-card-head h3 { margin: 0; font-size: 14.5px; }
+.ost-dash-stat { margin: 0 0 4px; }
+.ost-dash-unread { color: var(--ost-accent); }
+.ost-dash-row {
+  font: inherit; display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
+  background: none; border: 0; border-top: 1px solid var(--ost-line); padding: 8px 2px; cursor: pointer;
+  text-align: left; color: inherit;
+}
+.ost-dash-row:hover { color: var(--ost-accent); }
+.ost-dash-row-static { cursor: default; }
+.ost-dash-row-static:hover { color: inherit; }
+
+/* Page editor additions */
+.ost-insert-zone {
+  display: block; width: 100%; height: 14px; border: 0; background: transparent;
+  cursor: pointer; position: relative; padding: 0;
+}
+.ost-insert-zone span {
+  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.8);
+  width: 22px; height: 22px; line-height: 20px; border-radius: 50%;
+  background: var(--ost-accent); color: var(--ost-accent-contrast); font-weight: 700;
+  opacity: 0; transition: opacity 120ms ease, transform 120ms ease;
+}
+.ost-insert-zone:hover span { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+.ost-insert-zone:hover { background: color-mix(in srgb, var(--ost-accent) 8%, transparent); }
+.ost-drag-dots { opacity: 0.6; margin-right: 5px; cursor: grab; letter-spacing: -2px; }
+.ost-blockwrap.is-dragging { opacity: 0.45; }
+
+/* Settings drawer + version preview */
+.ost-settings-card {
+  background: var(--ost-panel); border-radius: 14px; width: min(560px, 92vw);
+  max-height: 86vh; overflow-y: auto; padding: 20px 22px;
+}
+.ost-settings-section { border-top: 1px solid var(--ost-line); padding-top: 14px; margin-top: 14px; }
+.ost-settings-section h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ost-muted); }
+.ost-version-preview {
+  background: #fff; border-radius: 14px; width: min(1100px, 94vw); max-height: 88vh;
+  display: flex; flex-direction: column; overflow: hidden;
+}
+.ost-version-preview-bar {
+  display: flex; gap: 12px; align-items: center; justify-content: space-between;
+  padding: 12px 16px; border-bottom: 1px solid var(--ost-line); background: var(--ost-panel);
+}
+.ost-version-preview-body { overflow-y: auto; }
+.ost-global-versions { margin-top: 12px; }
+
+/* Media */
+.ost-media-doc { font-size: 42px; display: grid; place-items: center; aspect-ratio: 4 / 3; }
+.ost-media-detail { display: grid; gap: 8px; margin-top: 16px; }
+.ost-media-detail-head { display: grid; gap: 3px; }
+.ost-media-preview { max-width: 320px; border-radius: 10px; border: 1px solid var(--ost-line); }
+.ost-file-current { font-size: 13px; padding: 8px 0; }
+
+/* Redirects */
+.ost-redirect-form { display: flex; gap: 10px; align-items: end; margin-bottom: 16px; }
+.ost-redirect-form .ost-label { margin-bottom: 0; }
+.ost-redirect-arrow { padding-bottom: 9px; color: var(--ost-muted); }
+.ost-redirect-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: default; }
+.ost-redirect-row code { background: color-mix(in srgb, var(--ost-ink) 6%, transparent); padding: 2px 6px; border-radius: 6px; font-size: 12.5px; }
+
+@media (max-width: 1100px) {
+  .ost-form-editor { grid-template-columns: 1fr; }
+  .ost-form-preview { position: static; }
+}
+
+/* ---- Analytics tab ---- */
+.ost-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
+.ost-kpi { display: grid; gap: 2px; padding: 14px 16px; }
+.ost-kpi.is-highlight { border-color: var(--ost-accent); box-shadow: inset 0 3px 0 var(--ost-accent); }
+.ost-kpi-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ost-muted); }
+.ost-kpi-value { font-size: 26px; letter-spacing: -0.02em; }
+.ost-kpi-delta { font-size: 12px; color: var(--ost-muted); }
+.ost-kpi-delta.is-up { color: var(--ost-live); }
+.ost-kpi-delta.is-down { color: var(--ost-danger); }
+
+.ost-analytics-section { margin-bottom: 14px; }
+.ost-analytics-note { margin: -4px 0 14px; font-size: 12px; }
+.ost-analytics-section h3 { margin: 0 0 12px; font-size: 14.5px; display: flex; justify-content: space-between; align-items: baseline; }
+.ost-analytics-subhead { margin: 14px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ost-muted); }
+.ost-analytics-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; align-items: start; }
+
+.ost-trend-wrap { display: grid; gap: 4px; }
+.ost-trend { width: 100%; height: 130px; display: block; }
+.ost-trend-bar { fill: color-mix(in srgb, var(--ost-accent) 30%, transparent); }
+.ost-trend-conversion { fill: var(--ost-accent); }
+.ost-trend-dates { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ost-muted); }
+.ost-trend-key { font-size: 11px; font-weight: 500; color: color-mix(in srgb, var(--ost-accent) 45%, transparent); }
+.ost-trend-key em { font-style: normal; color: var(--ost-accent); }
+
+.ost-barlist { display: grid; gap: 7px; }
+.ost-barlist-row { display: grid; grid-template-columns: minmax(90px, 1.3fr) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
+.ost-barlist-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ost-barlist-track { background: color-mix(in srgb, var(--ost-ink) 6%, transparent); border-radius: 99px; height: 8px; overflow: hidden; }
+.ost-barlist-fill { display: block; height: 100%; background: var(--ost-accent); border-radius: 99px; }
+.ost-barlist-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
+
+.ost-funnel { margin-bottom: 12px; display: grid; gap: 6px; }
+.ost-journey { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--ost-line); font-size: 13px; }
+.ost-journey-path { min-width: 0; }
+.ost-journey-arrow { color: var(--ost-muted); }
+.ost-hours { display: flex; align-items: flex-end; gap: 2px; height: 46px; }
+.ost-hour-bar { flex: 1; background: color-mix(in srgb, var(--ost-accent) 55%, transparent); border-radius: 2px 2px 0 0; min-height: 2px; }
+.ost-housekeeping { flex-wrap: wrap; }
+.ost-dash-week { margin: 4px 0 0; font-size: 13px; }

package/dist/submission-BKdBedOe.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Framework-agnostic submission processing: origin check, honeypot, minimum
+ * fill time, rate limiting, and server-side re-validation with the shared
+ * rules. The route layer handles HTTP; this module handles the contract.
+ */
+declare const HONEYPOT_FIELD_NAME = "website_url_confirm";
+type FormFieldConfig = {
+    name?: string;
+    label?: string;
+    type?: string;
+    required?: boolean;
+    placeholder?: string;
+    help?: string;
+    /** For select/radio/checkbox groups. Strings or {label, value} pairs. */
+    options?: Array<string | {
+        label?: string;
+        value?: string;
+    }>;
+};
+type FormNotifyConfig = {
+    /** Addresses that receive a copy of each submission. */
+    emails?: string[];
+    /** Subject template; `{form}` is replaced with the form title. */
+    subject?: string;
+    /** Send the success message back to the submitter's email field. */
+    autoReply?: boolean;
+};
+type FormConfig = {
+    steps?: Array<{
+        title?: string;
+        fields?: FormFieldConfig[];
+    }>;
+    notify?: FormNotifyConfig;
+};
+type RateLimitStore = {
+    isLimited(key: string, now: number): boolean | Promise<boolean>;
+};
+declare function createMemoryRateLimitStore(options?: {
+    max?: number;
+    windowMs?: number;
+}): RateLimitStore;
+type ProcessSubmissionArgs = {
+    config: FormConfig;
+    data: Record<string, unknown>;
+    now?: number;
+    minFillTimeMs?: number;
+    honeypotFieldName?: string;
+    knownGoodEmailDomains?: string[];
+};
+type ProcessSubmissionResult = {
+    outcome: 'spam';
+} | {
+    outcome: 'invalid';
+    fieldErrors: Record<string, string>;
+} | {
+    outcome: 'ok';
+    normalizedData: Record<string, unknown>;
+};
+declare function processSubmission(args: ProcessSubmissionArgs): ProcessSubmissionResult;
+
+export { type FormConfig as F, HONEYPOT_FIELD_NAME as H, type ProcessSubmissionArgs as P, type RateLimitStore as R, type FormFieldConfig as a, type FormNotifyConfig as b, type ProcessSubmissionResult as c, createMemoryRateLimitStore as d, processSubmission as p };

package/dist/submission-CzrfXu17.d.ts

@@ -0,0 +1,30 @@
+type FormFieldConfig = {
+    name?: string;
+    label?: string;
+    type?: string;
+    required?: boolean;
+    placeholder?: string;
+    help?: string;
+    /** For select/radio/checkbox groups. Strings or {label, value} pairs. */
+    options?: Array<string | {
+        label?: string;
+        value?: string;
+    }>;
+};
+type FormNotifyConfig = {
+    /** Addresses that receive a copy of each submission. */
+    emails?: string[];
+    /** Subject template; `{form}` is replaced with the form title. */
+    subject?: string;
+    /** Send the success message back to the submitter's email field. */
+    autoReply?: boolean;
+};
+type FormConfig = {
+    steps?: Array<{
+        title?: string;
+        fields?: FormFieldConfig[];
+    }>;
+    notify?: FormNotifyConfig;
+};
+
+export type { FormConfig as F, FormNotifyConfig as a };

package/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "@orion-studios/cms",
+  "version": "0.5.0",
+  "description": "Orion CMS v2 core engine \u2014 JSONB content model on Supabase primitives",
+  "type": "module",
+  "exports": {
+    "./blocks": {
+      "types": "./dist/blocks/index.d.ts",
+      "import": "./dist/blocks/index.js",
+      "default": "./dist/blocks/index.js"
+    },
+    "./content": {
+      "types": "./dist/content/index.d.ts",
+      "import": "./dist/content/index.js",
+      "default": "./dist/content/index.js"
+    },
+    "./server": {
+      "types": "./dist/server/index.d.ts",
+      "import": "./dist/server/index.js",
+      "default": "./dist/server/index.js"
+    },
+    "./forms": {
+      "types": "./dist/forms/index.d.ts",
+      "import": "./dist/forms/index.js",
+      "default": "./dist/forms/index.js"
+    },
+    "./forms/react": {
+      "types": "./dist/forms/react.d.ts",
+      "import": "./dist/forms/react.js",
+      "default": "./dist/forms/react.js"
+    },
+    "./studio": {
+      "types": "./dist/studio/index.d.ts",
+      "import": "./dist/studio/index.js",
+      "default": "./dist/studio/index.js"
+    },
+    "./studio/styles.css": "./dist/studio/styles.css",
+    "./sql/bootstrap.sql": "./sql/bootstrap.sql",
+    "./package.json": "./package.json",
+    "./analytics/react": {
+      "types": "./dist/analytics/react.d.ts",
+      "import": "./dist/analytics/react.js",
+      "default": "./dist/analytics/react.js"
+    }
+  },
+  "files": [
+    "dist",
+    "sql",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\" && tsup && node -e \"require('fs').copyFileSync('src/studio/styles.css','dist/studio/styles.css')\"",
+    "typecheck": "tsc --noEmit",
+    "test": "tsx --test src/blocks/__tests__/*.test.ts src/server/__tests__/*.test.ts src/forms/__tests__/*.test.ts src/studio/__tests__/*.test.ts src/analytics/__tests__/*.test.ts"
+  },
+  "dependencies": {
+    "@supabase/ssr": "^0.7.0",
+    "@supabase/supabase-js": "^2.58.0",
+    "zod": "^3.25.0"
+  },
+  "peerDependencies": {
+    "next": "^15.0.0 || ^16.0.0",
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "tsup": "^8.0.0",
+    "tsx": "^4.21.0",
+    "typescript": "^5.6.3"
+  },
+  "author": "Orion Studios",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/OrionX6/orion-cms-packages.git",
+    "directory": "cms-core"
+  },
+  "keywords": [
+    "cms",
+    "nextjs",
+    "supabase",
+    "blocks",
+    "orion-studios"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}