@zikojs/notebook 0.14.2 → 0.15.1

package/src/index.css

@@ -1,172 +1,176 @@
-@import '@zikojs/console/style';
-@import url('./components/index.css');
-
-.ziko-notebook {
-  --primary: #0284c7;
-  --primary-hover: #0369a1;
-  --border-color: #e2e8f0;
-  --prompt-in: #303f9f;
-  --prompt-out: #d62728;
-  --bg-editor: #f8fafc;
-
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  color: #1e293b;
-}
-
-
-/* --- NOTEBOOK & CELLS --- */
-
-.ziko-notebook .notebook {
-  max-width: 900px;
-  margin: 16px auto;
-  padding: 0 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.ziko-notebook .cell {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid var(--border-color);
-  border-left: 4px solid transparent;
-  border-radius: 6px;
-  padding: 8px;
-  gap: 2px;
-  background: #ffffff;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
-  position: relative;
-}
-
-.ziko-notebook .cell.active {
-  border-left-color: var(--primary);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-}
-
-.ziko-notebook .cell-input-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  width: 100%;
-}
-
-.ziko-notebook .cell-output-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  width: 100%;
-}
-
-.ziko-notebook .prompt {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
-  color: var(--prompt-in);
-  text-align: right;
-  padding-top: 8px;
-  white-space: nowrap;
-  user-select: none;
-  font-weight: 700;
-}
-
-.ziko-notebook .prompt.out {
-  color: var(--prompt-out);
-}
-
-/* --- INPUT --- */
-
-.ziko-notebook .input-wrapper {
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  background: var(--bg-editor);
-  overflow: hidden;
-  flex: 1 1 0;
-  min-width: 0;
-  width: auto;
-  transition: border-color 0.15s ease;
-}
-
-.ziko-notebook .cell.active .input-wrapper {
-  border-color: #cbd5e1;
-}
-
-.ziko-notebook .input-wrapper .CodeMirror {
-  font-family: "Fira Code", SFMono-Regular, Consolas, monospace;
-  font-size: 13px;
-  height: auto !important;
-  background: transparent;
-  border-radius: 4px;
-}
-
-.ziko-notebook .input-wrapper .CodeMirror-scroll {
-  overflow-y: hidden !important;
-  overflow-x: auto !important;
-}
-
-.ziko-notebook .input-wrapper .CodeMirror-activeline-background {
-  background: rgba(2, 132, 199, 0.05);
-}
-
-.ziko-notebook .cell-controls {
-  display: flex;
-  /* align-items: center; */
-  align-items: baseline;
-  justify-content: flex-end;
-  gap: 2px;
-  flex-wrap: wrap;
-  margin: 0;
-  padding: 0;
-}
-
-.ziko-notebook .cm-line{
-  line-height: 1.3 !important;
-}
-
-/* --- OUTPUT --- */
-
-.ziko-notebook .output-wrapper {
-  flex: 1 1 0;
-  min-width: 0;
-  width: auto;
-  padding: 4px 0;
-}
-
-.ziko-notebook .output-area {
-  font-size: 14px;
-  word-break: break-word;
-}
-
-
-
-/* --- MOBILE --- */
-
-@media (max-width: 640px) {
-  .ziko-notebook .header {
-    padding: 8px 12px;
-  }
-
-  .ziko-notebook .toolbar {
-    width: 100%;
-    justify-content: center;
-    align-items: baseline;
-  }
-
-  .ziko-notebook .prompt {
-    font-size: 10px;
-    padding-top: 6px;
-  }
-}
-
-
-/* TEMP */
-
-.ziko-notebook .cm-editor{
-  margin: 1px;
-  outline: none;
-}
-.ziko-notebook .cm-scroller{
-  margin: 1px;
-  outline: none;
-}
-.ziko-notebook .cm-line{
-  margin: 1px;
-}
+@import '@zikojs/console/style';
+@import url('./components/index.css');
+
+.ziko-notebook {
+  --primary: #0284c7;
+  --primary-hover: #0369a1;
+  --border-color: #e2e8f0;
+  --prompt-in: #303f9f;
+  --prompt-out: #d62728;
+  --bg-editor: #f8fafc;
+
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  color: #1e293b;
+}
+
+
+/* --- NOTEBOOK & CELLS --- */
+
+.ziko-notebook .notebook {
+  max-width: 900px;
+  margin: 16px auto;
+  padding: 0 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow: auto;
+  /* max-height: 100vh; */
+  /* scrollbar-color: rebeccapurple transparent; */
+  /* scrollbar-color: var(--prompt-in) transparent; */
+}
+
+.ziko-notebook .cell {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--border-color);
+  border-left: 4px solid transparent;
+  border-radius: 6px;
+  padding: 8px;
+  gap: 2px;
+  background: #ffffff;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  position: relative;
+}
+
+.ziko-notebook .cell.active {
+  border-left-color: var(--primary);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.ziko-notebook .cell-input-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  width: 100%;
+}
+
+.ziko-notebook .cell-output-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  width: 100%;
+}
+
+.ziko-notebook .prompt {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  color: var(--prompt-in);
+  text-align: right;
+  padding-top: 8px;
+  white-space: nowrap;
+  user-select: none;
+  font-weight: 700;
+}
+
+.ziko-notebook .prompt.out {
+  color: var(--prompt-out);
+}
+
+/* --- INPUT --- */
+
+.ziko-notebook .input-wrapper {
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  background: var(--bg-editor);
+  overflow: hidden;
+  flex: 1 1 0;
+  min-width: 0;
+  width: auto;
+  transition: border-color 0.15s ease;
+}
+
+.ziko-notebook .cell.active .input-wrapper {
+  border-color: #cbd5e1;
+}
+
+.ziko-notebook .input-wrapper .CodeMirror {
+  font-family: "Fira Code", SFMono-Regular, Consolas, monospace;
+  font-size: 13px;
+  height: auto !important;
+  background: transparent;
+  border-radius: 4px;
+}
+
+.ziko-notebook .input-wrapper .CodeMirror-scroll {
+  overflow-y: hidden !important;
+  overflow-x: auto !important;
+}
+
+.ziko-notebook .input-wrapper .CodeMirror-activeline-background {
+  background: rgba(2, 132, 199, 0.05);
+}
+
+.ziko-notebook .cell-controls {
+  display: flex;
+  /* align-items: center; */
+  align-items: baseline;
+  justify-content: flex-end;
+  gap: 2px;
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 0;
+}
+
+.ziko-notebook .cm-line{
+  line-height: 1.3 !important;
+}
+
+/* --- OUTPUT --- */
+
+.ziko-notebook .output-wrapper {
+  flex: 1 1 0;
+  min-width: 0;
+  width: auto;
+  padding: 4px 0;
+}
+
+.ziko-notebook .output-area {
+  font-size: 14px;
+  word-break: break-word;
+}
+
+
+
+/* --- MOBILE --- */
+
+@media (max-width: 640px) {
+  .ziko-notebook .header {
+    padding: 8px 12px;
+  }
+
+  .ziko-notebook .toolbar {
+    width: 100%;
+    justify-content: center;
+    align-items: baseline;
+  }
+
+  .ziko-notebook .prompt {
+    font-size: 10px;
+    padding-top: 6px;
+  }
+}
+
+
+/* TEMP */
+
+.ziko-notebook .cm-editor{
+  margin: 1px;
+  outline: none;
+}
+.ziko-notebook .cm-scroller{
+  margin: 1px;
+  outline: none;
+}
+.ziko-notebook .cm-line{
+  margin: 1px;
+}

package/src/index.js

@@ -1,2 +1,2 @@
-import './index.css'
+import './index.css'
 export * from './main.js'

package/src/index.ts

@@ -1,97 +1,97 @@
-
-import type { UIElement } from "ziko/dom/UIElement";
-
-export type MaybePromise<T> = T | PromiseLike<T>;
-
-export interface NotebookCell {
-  id?: number;
-  type?: "code" | "markdown";
-  code?: MaybePromise<string>;
-  readonly?: boolean;
-  runtime?: string | null;
-  isEditingMarkdown?: boolean;
-  execCount?: number | null;
-  outputNode?: HTMLElement | null;
-  hasDomOutput?: boolean;
-}
-
-export type NotebookCells = MaybePromise<NotebookCell[]>;
-
-export interface NotebookOptions {
-  /**
-   * Initial cells, or a Promise resolving to the cells.
-   */
-  cells?: NotebookCells;
-
-  importMap?: Record<string, string>;
-  runCells?: boolean;
-  minLines?: number;
-  maxCells?: number;
-  showHeader?: boolean;
-  codeMirrorConfig?: unknown[] | Record<string, unknown>;
-  codeMirrorPlugins?: unknown[];
-  runtimePlugins?: Array<{
-    name: string;
-    [key: string]: unknown;
-  }>;
-  remarkPlugins?: unknown[];
-  rehypePlugins?: unknown[];
-}
-
-export declare class UINotebook extends UIElement {
-  constructor(options?: NotebookOptions);
-
-  /**
-   * Resolves when initial cells and Promise-based cell code
-   * have finished loading.
-   *
-   * Rejects if the initial cells source fails or does not
-   * resolve to an array. Individual code-source failures are
-   * displayed in their respective cells.
-   */
-  readonly ready: Promise<this>;
-
-  readonly id: string;
-
-  importMap: Record<string, string>;
-  runtimePlugins: NotebookOptions["runtimePlugins"];
-  codeMirrorConfig: NotebookOptions["codeMirrorConfig"];
-  codeMirrorPlugins: unknown[];
-  remarkPlugins: unknown[];
-  rehypePlugins: unknown[];
-  minLines: number;
-  maxCells: number;
-
-  runCell(id: number): Promise<void>;
-  runAllCells(): Promise<void>;
-
-  addCell(
-    type?: "code" | "markdown",
-    initialCode?: MaybePromise<string> | null,
-    afterId?: number | null,
-    readonly?: boolean
-  ): number | null;
-
-  deleteCell(id: number): void;
-  setActiveCell(id: number): void;
-  focusCell(id: number): void;
-  clearOutputs(): void;
-  resetScope(): Record<string, unknown>;
-  getScope(): Record<string, unknown>;
-
-  getNotebookData(options?: {
-    inputs?: boolean;
-    outputs?: boolean;
-  }): Array<{
-    id: number;
-    type: "code" | "markdown";
-    readonly: boolean;
-    order: number | null;
-    code?: string;
-    outputHtml?: string | null;
-  }>;
-}
-
-export declare function Notebook(
-  options?: NotebookOptions
+
+import type { UIElement } from "ziko/dom/UIElement";
+
+export type MaybePromise<T> = T | PromiseLike<T>;
+
+export interface NotebookCell {
+  id?: number;
+  type?: "code" | "markdown";
+  code?: MaybePromise<string>;
+  readonly?: boolean;
+  runtime?: string | null;
+  isEditingMarkdown?: boolean;
+  execCount?: number | null;
+  outputNode?: HTMLElement | null;
+  hasDomOutput?: boolean;
+}
+
+export type NotebookCells = MaybePromise<NotebookCell[]>;
+
+export interface NotebookOptions {
+  /**
+   * Initial cells, or a Promise resolving to the cells.
+   */
+  cells?: NotebookCells;
+
+  importMap?: Record<string, string>;
+  runCells?: boolean;
+  minLines?: number;
+  maxCells?: number;
+  showHeader?: boolean;
+  codeMirrorConfig?: unknown[] | Record<string, unknown>;
+  codeMirrorPlugins?: unknown[];
+  runtimePlugins?: Array<{
+    name: string;
+    [key: string]: unknown;
+  }>;
+  remarkPlugins?: unknown[];
+  rehypePlugins?: unknown[];
+}
+
+export declare class UINotebook extends UIElement {
+  constructor(options?: NotebookOptions);
+
+  /**
+   * Resolves when initial cells and Promise-based cell code
+   * have finished loading.
+   *
+   * Rejects if the initial cells source fails or does not
+   * resolve to an array. Individual code-source failures are
+   * displayed in their respective cells.
+   */
+  readonly ready: Promise<this>;
+
+  readonly id: string;
+
+  importMap: Record<string, string>;
+  runtimePlugins: NotebookOptions["runtimePlugins"];
+  codeMirrorConfig: NotebookOptions["codeMirrorConfig"];
+  codeMirrorPlugins: unknown[];
+  remarkPlugins: unknown[];
+  rehypePlugins: unknown[];
+  minLines: number;
+  maxCells: number;
+
+  runCell(id: number): Promise<void>;
+  runAllCells(): Promise<void>;
+
+  addCell(
+    type?: "code" | "markdown",
+    initialCode?: MaybePromise<string> | null,
+    afterId?: number | null,
+    readonly?: boolean
+  ): number | null;
+
+  deleteCell(id: number): void;
+  setActiveCell(id: number): void;
+  focusCell(id: number): void;
+  clearOutputs(): void;
+  resetScope(): Record<string, unknown>;
+  getScope(): Record<string, unknown>;
+
+  getNotebookData(options?: {
+    inputs?: boolean;
+    outputs?: boolean;
+  }): Array<{
+    id: number;
+    type: "code" | "markdown";
+    readonly: boolean;
+    order: number | null;
+    code?: string;
+    outputHtml?: string | null;
+  }>;
+}
+
+export declare function Notebook(
+  options?: NotebookOptions
 ): UINotebook;