duckfn-docs-kit 0.3.0 → 0.4.0

package/src/sql/sql.css

@@ -237,11 +237,13 @@ dfk-sql:not(:defined) {
 
 /* --- Icon buttons and their tooltips ------------------------------------- */
 
-/* The same rules (and the `[data-tip]` tooltip below) are declared in
-   `DfkSql.css`, because the buttons are split across the shadow boundary: the
-   code-block actions live in the shadow tree, the fullscreen toggle lives in
-   this light-DOM tab strip. Keep the two copies in sync. */
-.dfk-sql-icon-button {
+/* The class names are written by the shared `IconButton` widget
+   (`src/IconButton.ts`). The same rules (and the `[data-tip]` tooltip below) are
+   declared in `DfkSql.css` and `DfkMermaid.css`, because the buttons are split
+   across shadow boundaries: the code-block actions live in `<dfk-sql>`'s tree,
+   a diagram's cluster in `<dfk-mermaid>`'s, and the fullscreen toggle in this
+   light-DOM tab strip. Keep the copies in sync. */
+.dfk-icon-button {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -257,27 +259,27 @@ dfk-sql:not(:defined) {
   transition: background 0.12s ease, color 0.12s ease;
 }
 
-.dfk-sql-icon-button:hover:not(:disabled),
-.dfk-sql-icon-button:focus-visible {
+.dfk-icon-button:hover:not(:disabled),
+.dfk-icon-button:focus-visible {
   background: var(--ifm-color-emphasis-200, #e6e6e6);
   color: var(--ifm-color-primary, #14459b);
 }
 
-.dfk-sql-icon-button:disabled {
+.dfk-icon-button:disabled {
   opacity: 0.45;
   cursor: progress;
 }
 
-.dfk-sql-icon-button[hidden] {
+.dfk-icon-button[hidden] {
   display: none;
 }
 
 /* A sticky state, e.g. the wrap toggle while wrapping is on. */
-.dfk-sql-icon-on {
+.dfk-icon-on {
   color: var(--ifm-color-primary, #14459b);
 }
 
-.dfk-sql-icon {
+.dfk-icon {
   font-size: 1rem;
 }
 

package/dist/sql/editor.d.ts

@@ -1,16 +0,0 @@
-/**
- * The CodeMirror 6 editor that *is* the code view of a runnable SQL block.
- *
- * Every CodeMirror module arrives through dynamic `import()` inside
- * {@link mountSqlEditor}: a page full of SQL examples pays nothing for the
- * editor on its critical path, and Docusaurus' Node prerender never evaluates
- * any of it.
- */
-export interface SqlEditor {
-    getValue(): string;
-    setValue(value: string): void;
-    /** Soft-wraps long lines, or stops wrapping them (the block's wrap toggle). */
-    setWrap(wrapped: boolean): void;
-    destroy(): void;
-}
-export declare function mountSqlEditor(container: HTMLElement, value: string, onChange: (value: string) => void): Promise<SqlEditor>;

package/src/sql/editor.ts

@@ -1,75 +0,0 @@
-/**
- * The CodeMirror 6 editor that *is* the code view of a runnable SQL block.
- *
- * Every CodeMirror module arrives through dynamic `import()` inside
- * {@link mountSqlEditor}: a page full of SQL examples pays nothing for the
- * editor on its critical path, and Docusaurus' Node prerender never evaluates
- * any of it.
- */
-
-export interface SqlEditor {
-  getValue(): string;
-  setValue(value: string): void;
-  /** Soft-wraps long lines, or stops wrapping them (the block's wrap toggle). */
-  setWrap(wrapped: boolean): void;
-  destroy(): void;
-}
-
-export async function mountSqlEditor(
-  container: HTMLElement,
-  value: string,
-  onChange: (value: string) => void,
-): Promise<SqlEditor> {
-  const [
-    {basicSetup},
-    {sql},
-    {EditorView, keymap},
-    {defaultKeymap, historyKeymap},
-    {Compartment},
-  ] = await Promise.all([
-    import('codemirror'),
-    import('@codemirror/lang-sql'),
-    import('@codemirror/view'),
-    import('@codemirror/commands'),
-    import('@codemirror/state'),
-  ]);
-
-  // Wrapping is toggled from the outside, and reconfiguring it must not disturb
-  // the document or the undo history — that is exactly what a compartment is
-  // for, so the extension is swapped in place rather than rebuilt.
-  const wrap = new Compartment();
-
-  const view = new EditorView({
-    doc: value,
-    extensions: [
-      basicSetup,
-      sql(),
-      keymap.of([...defaultKeymap, ...historyKeymap]),
-      wrap.of([]),
-      EditorView.updateListener.of((update) => {
-        if (update.docChanged) {
-          onChange(update.state.doc.toString());
-        }
-      }),
-    ],
-    parent: container,
-    // `root` is left to CodeMirror's own `getRoot(container)`. The container sits
-    // in `<dfk-sql>`'s shadow root, so style-mod mounts the base theme into that
-    // same shadow root — exactly where the `.cm-*` rules are needed. Pinning it
-    // to `document` would put them outside the editor's tree instead, where a
-    // shadow boundary stops them.
-  });
-
-  return {
-    getValue: () => view.state.doc.toString(),
-    setValue: (next: string) =>
-      view.dispatch({
-        changes: {from: 0, to: view.state.doc.length, insert: next},
-      }),
-    setWrap: (wrapped: boolean) =>
-      view.dispatch({
-        effects: wrap.reconfigure(wrapped ? EditorView.lineWrapping : []),
-      }),
-    destroy: () => view.destroy(),
-  };
-}