@notis_ai/cli 0.2.0-beta.19.1 → 0.2.0-beta.196.1

package/dist/sdk/src/styles.css

@@ -0,0 +1,290 @@
+/**
+ * Notis theme CSS variables.
+ *
+ * Import this in your app layout:
+ *
+ *   import '@notis/sdk/styles.css';
+ *
+ * The portal injects the live Notis theme variables at render time.
+ */
+
+/* Top-layer surfaces must remain distinct from the app's flat content panels. */
+dialog.notis-dialog {
+  position: fixed;
+  inset: 0;
+  margin: auto;
+  box-sizing: border-box;
+  width: min(28rem, calc(100% - 2rem));
+  max-height: calc(100dvh - 2rem);
+  overflow: auto;
+  padding: 1.25rem;
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.75rem;
+  background: hsl(var(--popover));
+  color: hsl(var(--popover-foreground));
+  box-shadow: 0 16px 48px rgb(0 0 0 / 0.2);
+}
+
+dialog.notis-dialog::backdrop { background: rgb(0 0 0 / 0.45); }
+.notis-dialog-title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.5; }
+.notis-dialog-description { margin: 0.5rem 0 0; color: hsl(var(--muted-foreground)); font-size: 0.875rem; line-height: 1.5; }
+
+/* Framework-neutral styles: the app owns its Tailwind entry point. This file
+ * is also consumed in shadow roots and by apps on older Tailwind versions.
+ * The shell rules live in the native sublayer `components.notis-sdk`, so a
+ * page's Tailwind utilities (p-4, border-red-500) still win over them.
+ * The list-row spacing contract below is the one exception. Never
+ * use a bare Tailwind-owned `@layer base` / `@layer components` block: Vite
+ * processes this import separately from the app stylesheet, and Tailwind 3
+ * rejects those blocks without matching `@tailwind` directives.
+ *
+ * Tailwind 4: the statement below repeats its full layer order, including the
+ * `properties` layer it declares first for its --tw-* fallback reset, so the
+ * order holds whichever stylesheet loads first and the shell rules win over
+ * preflight and the app's base defaults.
+ * Tailwind 3: preflight, components and utilities are unlayered and beat every
+ * layered rule, so its preflight (`button` and list resets, `*` border colour)
+ * wins over these shell rules; utilities still win too. A Tailwind 3 app that
+ * puts a shell class on a `button`, `ul` or `ol` restates the background and
+ * padding it needs. */
+@layer properties, theme, base, components, utilities;
+
+@layer components.notis-sdk {
+  * {
+    border-color: hsl(var(--border));
+  }
+  [data-notis-app-root] {
+    color: hsl(var(--foreground));
+    display: block;
+    min-height: 100%;
+  }
+
+  .notis-app-shell {
+    margin-inline: auto;
+    width: 100%;
+    max-width: var(--portal-page-max-width);
+    padding: 1.5rem 1rem;
+  }
+
+  /* Flat panel: no border or shadow around items. */
+  .notis-app-surface {
+    border-radius: 1rem;
+    background-color: hsl(var(--muted));
+    color: hsl(var(--card-foreground));
+  }
+
+  .list-row {
+    border-radius: 0.75rem;
+    background-color: hsl(var(--muted));
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+    transition-duration: 150ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .list-row-selected {
+    background-color: hsl(var(--primary) / 0.06);
+  }
+
+  /* Split pages are full-bleed; only the list pane carries a hairline. */
+  .notis-app-split {
+    display: flex;
+    height: 100%;
+    min-height: 0;
+    width: 100%;
+    max-width: none;
+    flex-direction: column;
+  }
+
+  .notis-app-pane-list {
+    width: 100%;
+    flex-shrink: 0;
+    background-color: hsl(var(--muted) / 0.4);
+  }
+
+  .notis-app-pane-detail {
+    min-width: 0;
+    flex: 1 1 0%;
+    background-color: hsl(var(--background));
+  }
+
+  .notis-app-section {
+    padding: 1.25rem;
+  }
+
+  @media (min-width: 768px) {
+    .notis-app-shell { padding-block: 2rem; }
+    .notis-app-section { padding: 1.5rem; }
+  }
+
+  @media (min-width: 1024px) {
+    .list-row { background-color: transparent; }
+    .list-row:hover { background-color: hsl(var(--muted) / 0.6); }
+    .list-row-selected,
+    .list-row-selected:hover { background-color: hsl(var(--primary) / 0.06); }
+    .notis-app-split { flex-direction: row; }
+    .notis-app-pane-list {
+      width: 20rem;
+      border-right-width: 1px;
+      border-right-color: hsl(var(--border));
+    }
+  }
+
+  @media (min-width: 1280px) {
+    .notis-app-pane-list { width: 24rem; }
+  }
+}
+
+/* A list row owns its 16px side gutter and 12px vertical rhythm, as in the
+ * Portal and pre-Space Apps. Keep only this spacing outside the utility layers:
+ * Tailwind 3 utilities are unlayered, so a second class specificity preserves
+ * it regardless of stylesheet order. Deliberate inline/important overrides still
+ * work. Shell/section/layout utilities and row colours remain overridable above. */
+.list-row.list-row { padding: 0.75rem 1rem; }
+
+/*
+ * Markdown value-type rendering (see the `Markdown` component). Plain CSS on
+ * theme variables so it works inside the portal shadow root and the dev
+ * harness without depending on the app's Tailwind content scan.
+ */
+.notis-markdown {
+  font-size: 14px;
+  line-height: 1.65;
+  color: hsl(var(--foreground));
+  overflow-wrap: break-word;
+}
+
+.notis-markdown--sm {
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.notis-markdown > :first-child {
+  margin-top: 0;
+}
+
+.notis-markdown > :last-child {
+  margin-bottom: 0;
+}
+
+.notis-markdown p {
+  margin: 0.625em 0;
+}
+
+.notis-markdown h1,
+.notis-markdown h2,
+.notis-markdown h3,
+.notis-markdown h4,
+.notis-markdown h5,
+.notis-markdown h6 {
+  margin: 1.25em 0 0.5em;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  line-height: 1.3;
+  color: hsl(var(--foreground));
+}
+
+.notis-markdown h1 { font-size: 1.5em; }
+.notis-markdown h2 { font-size: 1.25em; }
+.notis-markdown h3 { font-size: 1.1em; }
+.notis-markdown h4,
+.notis-markdown h5,
+.notis-markdown h6 { font-size: 1em; }
+
+.notis-markdown ul,
+.notis-markdown ol {
+  margin: 0.625em 0;
+  padding-left: 1.5em;
+}
+
+.notis-markdown ul { list-style-type: disc; }
+.notis-markdown ol { list-style-type: decimal; }
+
+.notis-markdown li {
+  margin: 0.25em 0;
+}
+
+.notis-markdown li > ul,
+.notis-markdown li > ol {
+  margin: 0.25em 0;
+}
+
+.notis-markdown ul.contains-task-list {
+  list-style: none;
+  padding-left: 0.375em;
+}
+
+.notis-markdown li.task-list-item input[type='checkbox'] {
+  margin-right: 0.5em;
+  accent-color: hsl(var(--primary));
+}
+
+.notis-markdown blockquote {
+  margin: 0.75em 0;
+  padding: 0.125em 0 0.125em 0.875em;
+  border-left: 3px solid hsl(var(--border));
+  color: hsl(var(--muted-foreground));
+}
+
+.notis-markdown a {
+  color: hsl(var(--primary));
+  text-decoration: underline;
+  text-decoration-color: hsl(var(--primary) / 0.35);
+  text-underline-offset: 2px;
+}
+
+.notis-markdown a:hover {
+  text-decoration-color: hsl(var(--primary));
+}
+
+.notis-markdown code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.875em;
+  padding: 0.125em 0.375em;
+  border-radius: 0.25rem;
+  background: hsl(var(--muted));
+  color: hsl(var(--foreground));
+}
+
+.notis-markdown pre {
+  margin: 0.75em 0;
+  padding: 0.75em 1em;
+  border-radius: 0.5rem;
+  background: hsl(var(--muted));
+  overflow-x: auto;
+}
+
+.notis-markdown pre code {
+  padding: 0;
+  background: transparent;
+  font-size: 0.875em;
+}
+
+.notis-markdown hr {
+  margin: 1.25em 0;
+  border: 0;
+  border-top: 1px solid hsl(var(--border));
+}
+
+.notis-markdown img {
+  max-width: 100%;
+  border-radius: 0.5rem;
+}
+
+.notis-markdown table {
+  margin: 0.75em 0;
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.95em;
+}
+
+.notis-markdown th,
+.notis-markdown td {
+  padding: 0.375em 0.75em;
+  border: 1px solid hsl(var(--border));
+  text-align: left;
+}
+
+.notis-markdown th {
+  background: hsl(var(--muted));
+  font-weight: 600;
+}

package/dist/sdk/src/tailwind.ts

@@ -0,0 +1,66 @@
+/** Build-only SDK content discovery. Author configuration and PostCSS plugins stay intact. */
+import { existsSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { dirname, join, relative, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+export function notisTailwindContent() {
+  let root = process.cwd();
+  let temporary: string | undefined;
+  const wrappers = new Map<string, string>();
+  const cleanup = () => {
+    if (temporary) rmSync(temporary, { recursive: true, force: true });
+    temporary = undefined;
+    wrappers.clear();
+  };
+  return {
+    name: 'notis-sdk-tailwind-content',
+    enforce: 'pre' as const,
+    configResolved(config: { root: string }) { root = config.root; },
+    transform(source: string, id: string) {
+      const stylesheet = id.split('?')[0];
+      if (!stylesheet.endsWith('.css')) return null;
+      // Tailwind 4 discovers dependency sources through CSS, not config.content.
+      // Keep the author's imports, configuration and PostCSS pipeline untouched.
+      if (/@import\s+(?:url\(\s*)?(['"])tailwindcss(?:\/[^'"]*)?\1/.test(source)) {
+        const sdkSource = dirname(fileURLToPath(import.meta.url));
+        const relativeSource = './' + relative(dirname(stylesheet), sdkSource).replaceAll('\\', '/');
+        const directive = `@source ${JSON.stringify(relativeSource)};`;
+        return source.includes(directive) ? null : { code: `${source}\n${directive}\n`, map: null };
+      }
+      if (!/@tailwind\s/.test(source)) return null;
+      const explicit = source.match(/@config\s+(['"])(.*?)\1\s*;/);
+      const config = explicit
+        ? resolve(dirname(id.split('?')[0]), explicit[2])
+        : ['ts', 'js', 'cjs', 'mjs'].map(ext => join(root, `tailwind.config.${ext}`)).find(existsSync);
+      if (!config) return null;
+      let wrapper = wrappers.get(config);
+      if (!wrapper) {
+        temporary ||= mkdtempSync(join(tmpdir(), 'notis-tailwind-'));
+        wrapper = join(temporary, `config-${wrappers.size}.ts`);
+        const sdkGlob = join(dirname(fileURLToPath(import.meta.url)), '**/*.{ts,tsx}').replaceAll('\\', '/');
+        writeFileSync(wrapper, `import config from ${JSON.stringify(config)};
+import { resolve } from 'node:path';
+const content = config.content || [];
+const files = Array.isArray(content) ? content : (content.files || []);
+const base = ${JSON.stringify(root)};
+const relativeBase = ${JSON.stringify(dirname(config))};
+export default { ...config, content: {
+  ...(Array.isArray(content) ? {} : content),
+  relative: false,
+  files: [...files.map(file => typeof file !== 'string' ? file :
+    (file.startsWith('!') ? '!' : '') + resolve(content.relative ? relativeBase : base, file.replace(/^!/, ''))),
+    ${JSON.stringify(sdkGlob)}],
+} };
+`);
+        wrappers.set(config, wrapper);
+      }
+      const directive = `@config ${JSON.stringify('./' + relative(dirname(id.split('?')[0]), wrapper).replaceAll('\\', '/'))};`;
+      // Imports must remain before @config. Vite resolves them before PostCSS.
+      const code = explicit ? source.replace(explicit[0], directive) : `${source}\n${directive}\n`;
+      return { code, map: null };
+    },
+    closeBundle: cleanup,
+    closeWatcher: cleanup,
+  };
+}

package/dist/sdk/src/vite.ts

@@ -0,0 +1,83 @@
+/**
+ * Vite config builder for Notis apps.
+ *
+ * Usage:
+ * ```ts
+ * // vite.config.ts
+ * import { notisViteConfig } from '@notis/sdk/vite';
+ * import appConfig from './notis.config';
+ * export default notisViteConfig(appConfig);
+ * ```
+ *
+ * Produces a library-mode ES module bundle with React externalized.
+ * Output: .notis/output/bundle/app.js + app.css
+ */
+
+import * as vite from 'vite';
+import type { NotisAppConfig } from './config';
+import type { SpacesWorkspace } from './space';
+import { notisTailwindContent } from './tailwind';
+
+const externalReact = ['react', 'react-dom', 'react-dom/client', 'react/jsx-runtime', 'react/jsx-dev-runtime'];
+
+// The oldest browsers that support CSS light-dark() natively. With Vite's
+// default CSS target, Lightning CSS (Vite 8) rewrites light-dark(a, b) into
+// var(--lightningcss-light, a) var(--lightningcss-dark, b), and those
+// variables are only set by a stylesheet color-scheme rule. The Notis host
+// sets color-scheme inline, so the lowered colours resolve to nothing and
+// render transparent. Targeting these versions keeps light-dark() as written.
+export const NOTIS_CSS_TARGET = ['chrome123', 'edge123', 'firefox120', 'safari17.5'];
+
+export function notisViteConfig(appConfig: NotisAppConfig | SpacesWorkspace): vite.UserConfig {
+  // Vite 8 preserves external require() calls. App bundles run in a browser
+  // with an ESM import map, so bundled CommonJS dependencies must import React.
+  // Older pulled apps also receive this SDK; their Vite already does this.
+  const externalRequirePlugin = 'esmExternalRequirePlugin' in vite
+    && typeof vite.esmExternalRequirePlugin === 'function'
+    ? vite.esmExternalRequirePlugin({ external: externalReact })
+    : null;
+  return {
+    plugins: [
+      notisTailwindContent(),
+      ...(externalRequirePlugin ? [externalRequirePlugin] : []),
+      // @vitejs/plugin-react is added by the consumer's vite.config.ts
+      // or auto-detected. We provide the config shape only.
+    ],
+    build: {
+      lib: {
+        entry: '.notis/_entry.tsx',
+        formats: ['es'],
+        fileName: () => 'app.js',
+      },
+      // Keep Vite's compatibility alias: SDK refresh also serves historical
+      // Vite 5/6/7 apps, which do not understand rolldownOptions.
+      rollupOptions: {
+        // On Vite 8 the plugin must own externalization as well as conversion:
+        // a top-level external match bypasses its require-to-import transform.
+        external: externalRequirePlugin ? [] : externalReact,
+        output: {
+          globals: {
+            react: 'window.React',
+            'react-dom': 'window.ReactDOM',
+            'react-dom/client': 'window.ReactDOMClient',
+            'react/jsx-runtime': 'window.React',
+          },
+          assetFileNames: 'app[extname]',
+          inlineDynamicImports: true,
+        },
+      },
+      outDir: '.notis/output/bundle',
+      emptyOutDir: true,
+      cssCodeSplit: false,
+      cssTarget: NOTIS_CSS_TARGET,
+    },
+    resolve: {
+      alias: {
+        '@': process.cwd(),
+      },
+    },
+    define: {
+      'process.env.NODE_ENV': JSON.stringify('production'),
+    },
+  };
+}