@notis_ai/cli 0.2.0-beta.160.1 → 0.2.0-beta.162.1

package/template/package.json

@@ -5,28 +5,31 @@
   "private": true,
   "type": "module",
   "scripts": {
+    "type-check": "tsc --noEmit",
     "dev": "vite --configLoader runner",
     "build": "vite build --configLoader runner"
   },
   "dependencies": {
     "@notis/sdk": "file:./packages/sdk",
     "@phosphor-icons/react": "^2.1.10",
-    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-slot": "^1.3.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "tailwind-merge": "^2.6.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "tailwind-merge": "^3.6.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "@vitejs/plugin-react": "^4.0.0",
-    "postcss": "^8.0.0",
-    "tailwindcss": "^3.4.0",
-    "typescript": "^5.0.0",
-    "vite": "^6.0.0"
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.7",
+    "@vitejs/plugin-react": "^6.1.1",
+    "postcss": "^8.5.28",
+    "tailwindcss": "^4.3.3",
+    "@typescript/native": "npm:typescript@^7.0.2",
+    "typescript": "npm:@typescript/typescript6@^6.0.2",
+    "vite": "^8.2.2",
+    "@tailwindcss/postcss": "^4.3.3"
   }
 }

package/template/packages/sdk/package.json

@@ -29,8 +29,8 @@
   },
   "devDependencies": {
     "@types/node": "^20.0.0",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "typescript": "^5.0.0"
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.7",
+    "typescript": "^7.0.2"
   }
 }

package/template/packages/sdk/src/styles.css

@@ -8,13 +8,11 @@
  * The portal injects the live Notis theme variables at render time.
  */
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
+/* 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. */
 @layer base {
   * {
-    @apply border-border;
+    border-color: hsl(var(--border));
   }
   [data-notis-app-root] {
     color: hsl(var(--foreground));
@@ -25,42 +23,78 @@
 
 @layer components {
   .notis-app-shell {
-    @apply mx-auto w-full max-w-[var(--portal-page-max-width)] px-4 py-6 md:px-4 md:py-8;
+    margin-inline: auto;
+    width: 100%;
+    max-width: var(--portal-page-max-width);
+    padding: 1.5rem 1rem;
   }
 
-  /* Flat panel. No border, no shadow: the design bar allows a single hairline
-   * between sections and nothing around items. */
+  /* Flat panel: no border or shadow around items. */
   .notis-app-surface {
-    @apply rounded-2xl bg-muted text-card-foreground;
+    border-radius: 1rem;
+    background-color: hsl(var(--muted));
+    color: hsl(var(--card-foreground));
   }
 
-  /* List rows: hover and selection are carried by background tint only. Rows
-   * read as tinted panels on mobile and as transparent rows on desktop. */
   .list-row {
-    @apply rounded-xl bg-muted px-4 py-3 transition-colors lg:bg-transparent lg:hover:bg-muted/60;
+    border-radius: 0.75rem;
+    background-color: hsl(var(--muted));
+    padding: 0.75rem 1rem;
+    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 {
-    @apply bg-primary/[0.06] lg:bg-primary/[0.06] lg:hover:bg-primary/[0.06];
+    background-color: hsl(var(--primary) / 0.06);
   }
 
-  /* Split (list + detail) pages are full-bleed: use these instead of
-   * .notis-app-shell. The list pane is tinted and carries the one allowed
-   * hairline; the detail pane sits on the plain background. */
+  /* Split pages are full-bleed; only the list pane carries a hairline. */
   .notis-app-split {
-    @apply flex h-full min-h-0 w-full max-w-none flex-col lg:flex-row;
+    display: flex;
+    height: 100%;
+    min-height: 0;
+    width: 100%;
+    max-width: none;
+    flex-direction: column;
   }
 
   .notis-app-pane-list {
-    @apply w-full shrink-0 bg-muted/40 lg:w-80 lg:border-r lg:border-border xl:w-96;
+    width: 100%;
+    flex-shrink: 0;
+    background-color: hsl(var(--muted) / 0.4);
   }
 
   .notis-app-pane-detail {
-    @apply min-w-0 flex-1 bg-background;
+    min-width: 0;
+    flex: 1 1 0%;
+    background-color: hsl(var(--background));
   }
 
   .notis-app-section {
-    @apply p-5 md:p-6;
+    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; }
   }
 }
 

package/template/packages/sdk/src/tailwind.ts

@@ -18,7 +18,17 @@ export function notisTailwindContent() {
     enforce: 'pre' as const,
     configResolved(config: { root: string }) { root = config.root; },
     transform(source: string, id: string) {
-      if (!id.split('?')[0].endsWith('.css') || !/@tailwind\s/.test(source)) return null;
+      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])

package/template/packages/sdk/src/vite.ts

@@ -13,24 +13,39 @@
  * Output: .notis/output/bundle/app.js + app.css
  */
 
+import * as vite from 'vite';
 import type { NotisAppConfig } from './config';
 import { notisTailwindContent } from './tailwind';
 
-export function notisViteConfig(appConfig: NotisAppConfig) {
+const externalReact = ['react', 'react-dom', 'react-dom/client', 'react/jsx-runtime', 'react/jsx-dev-runtime'];
+
+export function notisViteConfig(appConfig: NotisAppConfig): 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'] as const,
+        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: {
-        external: ['react', 'react-dom', 'react-dom/client', 'react/jsx-runtime', 'react/jsx-dev-runtime'],
+        // 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',

package/template/packages/sdk/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "types": ["node", "react", "react-dom"],
     "target": "ES2022",
     "module": "ESNext",
     "moduleResolution": "bundler",

package/template/postcss.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    "@tailwindcss/postcss": {},
   },
 };
 

package/template/tailwind.config.ts

@@ -2,13 +2,7 @@ import type { Config } from 'tailwindcss';
 import tailwindAnimate from 'tailwindcss-animate';
 
 const config: Config = {
-  darkMode: ['class'],
-  content: [
-    './app/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './lib/**/*.{ts,tsx}',
-    './packages/sdk/src/**/*.{ts,tsx}',
-  ],
+  darkMode: 'class',
   theme: {
     extend: {
       colors: {

package/template/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "types": ["node", "react", "react-dom", "vite/client"],
     "target": "ES2017",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,