sol-components 2.1.0

package/web/styles/sol-pod-css.js

@@ -0,0 +1,187 @@
+// Styles for <sol-pod>'s own shadow root — the pod header, breadcrumb,
+// tree, and status toast. Rules rendered inside sol-modal's shadow root
+// live in sol-pod-modal-css.js instead.
+import { sheetFrom } from '../../core/adopt.js';
+import { BTN_CSS } from './buttons-css.js';
+
+export const CSS = BTN_CSS + `
+  :host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+    background: var(--surface, #fff);
+    border-radius: 8px;
+    box-shadow: 0 2px 8px var(--shadow, rgba(0,0,0,0.1));
+    font-family: system-ui, -apple-system, sans-serif;
+    /* Anchor the component to the theme's font token (not the host page's
+       inherited size) so the whole UI — header row included — scales. */
+    font-size: var(--font-size, 20px);
+    color: var(--text, #212121);
+  }
+
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+
+  .pod-header {
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--border, #e0e0e0);
+    flex-shrink: 0;
+    display: flex; flex-direction: column; gap: 6px;
+  }
+  .pod-header-row {
+    display: flex; align-items: center; gap: 6px;
+  }
+  .pod-header select {
+    flex: 1; padding: 6px 10px;
+    /* Without min-width:0 a flex <select> reserves the width of its
+       widest option, pushing the login + settings buttons out of the
+       sidebar in narrow panels. */
+    min-width: 0;
+    border: 1px solid var(--border, #e0e0e0); border-radius: 4px;
+    font-size: 0.9em;
+    background: var(--surface, #fff); color: var(--text, #212121);
+    font-family: inherit;
+  }
+
+  .pod-login { flex-shrink: 0; }
+
+  .pod-settings-btn {
+    flex-shrink: 0;
+    background: var(--surface, #fff);
+    border: 1px solid var(--border, #e0e0e0); border-radius: 4px;
+    padding: 5px 9px; cursor: pointer;
+    color: var(--text-muted, #666); font-size: 0.95em;
+  }
+  .pod-settings-btn:hover { background: var(--hover, #f0f0f0); }
+
+  .pod-settings { display: none; flex-direction: column; gap: 5px; }
+  .pod-settings.open {
+    display: flex;
+    align-self: flex-end;          /* fit-width, tucked under the gear button */
+    padding: 8px 10px;
+    border: 1px solid var(--border, #e0e0e0); border-radius: 4px;
+    background: var(--surface-2, #f9f9f9);
+    font-size: 0.85em;
+  }
+  .pod-settings label {
+    display: flex; align-items: center; gap: 6px;
+    cursor: pointer; color: var(--text, #212121);
+  }
+
+  .breadcrumb {
+    padding: 10px 20px;
+    background: var(--surface-2, #f9f9f9);
+    border-bottom: 1px solid var(--border, #e0e0e0);
+    font-size: 0.9em; color: var(--text-muted, #666);
+    flex-shrink: 0;
+    display: flex; align-items: center;
+  }
+  .breadcrumb button {
+    padding: 4px 8px; font-size: 0.9em; margin-right: 5px;
+    background: var(--surface-2, #f9f9f9); border: none;
+    color: var(--text-muted, #666); cursor: pointer;
+    border-radius: 4px; font-family: inherit;
+  }
+  .breadcrumb button:hover { background: var(--hover, #f0f0f0); color: var(--accent, #2196f3); }
+  .breadcrumb .crumb-gear { margin-left: auto; margin-right: 0; font-size: 1.05em; line-height: 1; }
+  .breadcrumb .crumb-gear img { display: block; width: 1.1em; height: 1.1em; pointer-events: none; }
+
+  .pod-filter-row {
+    padding: 6px 14px;
+    border-bottom: 1px solid var(--border-soft, var(--border, #e0e0e0));
+    background: var(--surface, #fff);
+    flex-shrink: 0;
+  }
+  .pod-filter {
+    width: 100%;
+    padding: 5px 8px;
+    border: 1px solid var(--border, #e0e0e0);
+    border-radius: 4px;
+    background: var(--surface, #fff);
+    color: var(--text, #212121);
+    font-family: inherit; font-size: 0.85em;
+    box-sizing: border-box;
+  }
+  .pod-filter::placeholder { color: var(--text-faint, #999); }
+  .pod-filter:focus {
+    outline: none;
+    border-color: var(--accent, #2196f3);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2196f3) 22%, transparent);
+  }
+
+  .tree-wrapper {
+    flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px;
+    outline: none;
+  }
+  .tree-wrapper:focus-visible {
+    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent, #2196f3) 35%, transparent);
+  }
+  .file-tree { list-style: none; }
+  .file-tree li {
+    display: flex; align-items: center;
+    padding: 6px 12px; margin: 4px 0;
+    border-radius: 4px; cursor: pointer;
+    transition: background 0.2s; outline: none;
+  }
+  .file-tree li:hover { background: var(--hover, #f0f0f0); }
+  .file-tree li:focus { background: var(--focus-bg, #e3f2fd); box-shadow: 0 0 0 2px var(--accent, #2196f3); }
+
+  .item-label { flex: 1; word-break: break-word; min-width: 0; }
+
+  .item-gear {
+    flex-shrink: 0; background: none; border: none;
+    padding: 2px 6px; font-size: 1em;
+    color: var(--text-faint, #999); cursor: pointer;
+    border-radius: 4px; margin-left: 6px;
+    transition: color 0.15s;
+  }
+  .item-gear:hover { color: var(--accent-dark, #1976d2); background: var(--focus-bg, #e3f2fd); }
+  /* When gear-icon attribute is a URL, the button holds an <img>. */
+  .item-gear img { display: block; width: 1.1em; height: 1.1em; pointer-events: none; }
+
+  .file-tree .folder { font-weight: 500; color: var(--folder-color, var(--accent-dark, #1976d2)); }
+  .file-tree .file   { color: var(--file-color, #424242); }
+  .file-tree li[draggable="true"] { cursor: grab; }
+  .file-tree li.dragging { opacity: 0.5; cursor: grabbing; }
+  .file-tree li.selected {
+    background: var(--selected-bg, #c8e6f5);
+    box-shadow: 0 0 0 1px var(--accent, #2196f3) inset;
+  }
+  .file-tree li.selected:hover { background: var(--selected-hover, #b0d8ef); }
+
+  .drag-over .tree-wrapper {
+    background: var(--focus-bg, #e3f2fd);
+    outline: 2px dashed #4caf50; outline-offset: -2px;
+  }
+
+  .loading { padding: 20px; text-align: center; color: var(--text-faint, #999); }
+  .empty { padding: 20px; text-align: center; color: var(--text-faint, #999); font-style: italic; }
+
+  .status-toast {
+    position: fixed; top: 52px; left: 50%; transform: translateX(-50%);
+    z-index: 9998; display: none;
+    align-items: center; gap: 10px;
+    background: var(--surface, #fff);
+    border: 1px solid var(--border, #e0e0e0);
+    border-radius: 6px; padding: 8px 10px 8px 14px;
+    font-size: 0.85em;
+    box-shadow: 0 3px 14px var(--shadow, rgba(0,0,0,0.1));
+    max-width: 420px; min-width: 160px;
+    transition: opacity 0.4s ease;
+  }
+  .status-toast.error { background: #fff0f0; border-color: #f5c6cb; color: #c0392b; }
+  .status-toast.success { color: var(--success, #388e3c); }
+  .status-toast-close {
+    background: none; border: none; cursor: pointer;
+    font-size: 1.1em; color: inherit; opacity: 0.55;
+    padding: 0 4px; line-height: 1; flex-shrink: 0;
+  }
+  .status-toast-close:hover { opacity: 1; }
+
+  button { font-family: inherit; }
+  button:focus { outline: 2px solid var(--accent, #2196f3); outline-offset: 2px; }
+  /* Breadcrumb buttons use .sol-btn .sol-btn-sm .sol-btn-ghost. */
+`;
+
+export const sheet = sheetFrom(CSS);
+export default sheet;

package/web/styles/sol-pod-modal-css.js

@@ -0,0 +1,203 @@
+// Styles that <sol-pod> renders *inside* <sol-modal>'s shadow root.
+// Passed to a modal instance via `modal.styles = [sheet]` so the rules
+// reach the modal's shadow scope — sol-pod's own sheet can't cross the
+// boundary.
+import { sheetFrom } from '../../core/adopt.js';
+import { BTN_CSS } from './buttons-css.js';
+import { CSS as WAC_CSS } from './sol-wac-css.js';
+
+export const CSS = BTN_CSS + WAC_CSS + `
+  .modal-preview {
+    font-family: var(--font-mono, 'JetBrains Mono', 'Cascadia Code', 'SF Mono', Menlo, Consolas, ui-monospace, monospace);
+    font-size: 0.85em; white-space: pre-wrap; word-break: break-all;
+    background: var(--surface-2, #f9f9f9);
+    border: 1px solid var(--border, #e0e0e0);
+    border-radius: 4px; padding: 12px; flex: 1;
+  }
+  .modal-editor {
+    font-family: var(--font-mono, 'JetBrains Mono', 'Cascadia Code', 'SF Mono', Menlo, Consolas, ui-monospace, monospace);
+    font-size: 0.85em; flex: 1; min-height: 300px;
+    border: 1px solid var(--border-soft, var(--border, #e0e0e0));
+    border-radius: 6px; padding: 10px;
+    resize: vertical;
+    /* width: 100% with box-sizing: border-box so border + padding are
+       part of the width and the textarea can't overflow its container. */
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+    background: var(--surface, #fff); color: var(--text, #212121);
+  }
+  .modal-editor:focus {
+    outline: none;
+    border-color: var(--accent, #0f4ea0);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #0f4ea0) 22%, transparent);
+  }
+
+  .modal-media { max-width: 100%; max-height: 55vh; display: block; margin: 0 auto; border-radius: 4px; }
+  .modal-audio { width: 100%; margin-top: 12px; }
+  .modal-pdf { width: 100%; height: 55vh; border: none; border-radius: 4px; flex: 1; }
+
+  .upload-progress { font-size: 0.88em; color: var(--text-muted, #666); min-height: 1.4em; padding: 4px 0; }
+
+  .cm-editor-wrap {
+    flex: 1; min-height: 0; overflow: hidden;
+    border: 1px solid var(--border, #e0e0e0); border-radius: 4px;
+    display: flex; flex-direction: column; position: relative;
+  }
+  .cm-editor-wrap .cm-editor { flex: 1; height: 100%; font-size: 0.85em; }
+  .cm-editor-wrap .cm-scroller { font-family: var(--font-mono, 'JetBrains Mono', 'Cascadia Code', 'SF Mono', Menlo, Consolas, ui-monospace, monospace); overflow: auto; }
+
+  .graph-wrap {
+    width: 100%; flex: 1; min-height: 0; overflow: hidden;
+    border-radius: 6px; border: 1px solid var(--border, #e0e0e0);
+    cursor: grab;
+  }
+  .graph-wrap:active { cursor: grabbing; }
+  .graph-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 8px 4px 0; font-size: 0.8em; }
+  .graph-legend-item { font-weight: 600; }
+  .graph-legend-note { color: var(--text-muted, #666); margin-left: auto; }
+
+  .markdown-preview { padding: 16px 24px; line-height: 1.7; font-size: 0.95em; overflow-y: auto; flex: 1; }
+  .markdown-preview h1,.markdown-preview h2,.markdown-preview h3,.markdown-preview h4 {
+    margin: 1em 0 0.4em; font-weight: 700; border-bottom: 1px solid var(--border, #e0e0e0); padding-bottom: 4px;
+  }
+  .markdown-preview p { margin: 0.6em 0; }
+  .markdown-preview code {
+    font-family: var(--font-mono, 'JetBrains Mono', 'Cascadia Code', 'SF Mono', Menlo, Consolas, ui-monospace, monospace); font-size: 0.88em;
+    background: var(--surface-2, #f9f9f9); border: 1px solid var(--border, #e0e0e0);
+    border-radius: 3px; padding: 1px 5px;
+  }
+  .markdown-preview pre {
+    background: var(--surface-2, #f9f9f9); border: 1px solid var(--border, #e0e0e0);
+    border-radius: 6px; padding: 12px 16px; overflow-x: auto; margin: 0.8em 0;
+  }
+  .markdown-preview pre code { background: none; border: none; padding: 0; }
+  .markdown-preview a { color: var(--accent, #2196f3); text-decoration: underline; }
+  .markdown-preview table { border-collapse: collapse; width: 100%; margin: 0.8em 0; }
+  .markdown-preview th,.markdown-preview td { border: 1px solid var(--border, #e0e0e0); padding: 6px 12px; text-align: left; }
+  .markdown-preview th { background: var(--surface-2, #f9f9f9); font-weight: 600; }
+
+  .html-preview-pane { flex: 1; min-height: 0; border: 1px solid var(--border, #e0e0e0); border-radius: 6px 6px 0 0; overflow: hidden; }
+  .html-preview-iframe { width: 100%; height: 100%; border: none; background: #fff; }
+  .html-preview-divider {
+    flex-shrink: 0; padding: 4px 12px; font-size: 0.75em;
+    color: var(--text-muted, #666); text-align: center;
+    background: var(--surface-2, #f9f9f9);
+    border-left: 1px solid var(--border, #e0e0e0);
+    border-right: 1px solid var(--border, #e0e0e0);
+  }
+  .html-editor-pane {
+    flex: 1; min-height: 0; display: flex; flex-direction: column;
+    border: 1px solid var(--border, #e0e0e0); border-radius: 0 0 6px 6px; overflow: hidden;
+  }
+  .html-editor-pane .cm-editor-wrap { flex: 1; border: none; border-radius: 0; }
+
+  /* Triple table (raw-view) */
+  .triple-table { width: 100%; border-collapse: collapse; font-size: 0.85em; }
+  .triple-table th {
+    text-align: left; padding: 6px;
+    border-bottom: 2px solid var(--border, #e0e0e0);
+  }
+  .triple-table td {
+    padding: 4px 6px;
+    border-bottom: 1px solid var(--border, #e0e0e0);
+    word-break: break-all;
+  }
+
+  /* Modal separator line */
+  .modal-hr {
+    border: none;
+    border-top: 1px solid var(--border, #e0e0e0);
+    margin: 8px 0;
+  }
+
+  /* .modal-input — sol-pod-ops has its OWN shadow root that adopts this
+     sheet (sol-pod-modal-css.js), NOT sol-modal-css.js. So the rule
+     needs to live here too, otherwise rename/new-file/new-folder/upload
+     inputs render with bare UA styles. */
+  .modal-input {
+    width: min(100%, 50ch);
+    min-width: 18ch;
+    max-width: 50ch;
+    box-sizing: border-box;
+    appearance: none;
+    -webkit-appearance: none;
+    font: inherit;
+    line-height: 1.2;
+    padding: 0.4em 0.7em;
+    border: 1px solid var(--border-soft, var(--border, #d6dae2));
+    border-radius: 6px;
+    /* Same explicit height as .modal-row > .sol-btn below. */
+    height: calc(1.2em + 0.8em + 2px);
+    background: var(--surface, #fff);
+    color: var(--text, #0f1115);
+    transition: border-color 0.12s, box-shadow 0.12s;
+  }
+  .modal-input:focus {
+    outline: none;
+    border-color: var(--accent, #0f4ea0);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #0f4ea0) 22%, transparent);
+  }
+
+  /* Inline input+button row inside modal body — input is fit-width with
+     a max-width; button sits right next to it. Input and button share
+     font + vertical padding + line-height + explicit height so their
+     box heights match pixel-for-pixel. */
+  .modal-row {
+    display: flex; align-items: center; gap: 10px;
+    flex-wrap: wrap;
+  }
+  .modal-row > .modal-input,
+  .modal-row > input[type="text"],
+  .modal-row > input[type="file"] { flex: 0 1 auto; }
+  .modal-row > .sol-btn {
+    flex-shrink: 0;
+    font: inherit;
+    line-height: 1.2;
+    padding: 0.4em 0.9em;
+    border-radius: 6px;
+    height: calc(1.2em + 0.8em + 2px);
+    box-sizing: border-box;
+  }
+
+  /* File input: the UA renders both a button ("Choose Files") and a
+     label ("No file chosen") at its own default font size. Force both
+     to the body font so they don't read small next to body text. The
+     button is style-able via ::file-selector-button on modern browsers. */
+  input[type="file"] {
+    font: inherit;
+    line-height: 1.2;
+    color: var(--text, #0f1115);
+    max-width: 100%;
+  }
+  input[type="file"]::file-selector-button {
+    font: inherit;
+    line-height: 1.2;
+    padding: 0.4em 0.9em;
+    margin-right: 10px;
+    border: 1px solid var(--border-soft, var(--border, #d6dae2));
+    border-radius: 6px;
+    background: var(--surface-2, #f5f6f9);
+    color: var(--text, #0f1115);
+    cursor: pointer;
+    height: calc(1.2em + 0.8em + 2px);
+    box-sizing: border-box;
+    transition: background 0.12s, border-color 0.12s, color 0.12s;
+  }
+  input[type="file"]::file-selector-button:hover {
+    background: var(--hover, #eef0f4);
+    border-color: var(--accent, #0f4ea0);
+    color: var(--accent, #0f4ea0);
+  }
+
+  /* Embedded sol-live-edit inside the pod modal */
+  .pod-live-edit {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+export const sheet = sheetFrom(CSS);
+export default sheet;

package/web/styles/sol-query-css.js

@@ -0,0 +1,140 @@
+import { sheetFrom } from '../../core/adopt.js';
+import { BTN_CSS } from './buttons-css.js';
+
+export const CSS = BTN_CSS + `
+  :host {
+    display: block;
+    font-family: var(--font-ui, system-ui, sans-serif);
+    font-size: var(--font-size, var(--medium-font, 20px));
+    color: var(--text, #212121);
+  }
+  .container { overflow-x: auto; }
+
+  /* ── table ── */
+  table { border-collapse: collapse; margin: 0 0 .5rem; font-size: var(--medium-font, 20px); }
+  th, td {
+    padding: var(--query-cell-padding, var(--space-md, 8px) var(--space-lg, 12px));
+    text-align: left;
+    border: 1px solid var(--border, #ddd);
+    overflow-wrap: break-word;
+    word-break: break-word;
+  }
+  th {
+    background-color: var(--query-th-bg, var(--th-color, var(--accent-dark, #2C3E51)));
+    color: var(--query-th-color, var(--th-text-color, #fff));
+    font-weight: var(--font-weight-bold, 600);
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+  }
+  th::after { content: '⇅'; margin-left: var(--space-sm, 4px); font-size: var(--small-font, 16px); opacity: .55; }
+  th:focus-visible {
+    outline: 2px solid var(--accent, #4a9eff);
+    outline-offset: -2px;
+  }
+  a:focus-visible,
+  .bnode-modal-close:focus-visible {
+    outline: 2px solid var(--accent, #4a9eff);
+    outline-offset: 2px;
+  }
+  th[data-sort="asc"]::after  { content: '▲'; opacity: 1; }
+  th[data-sort="desc"]::after { content: '▼'; opacity: 1; }
+  tr:nth-child(even) { background-color: var(--query-row-alt-bg, var(--even-color, var(--hover, #fafafa))); }
+
+  /* ── dl ── */
+  dl { margin: 0 0 .5rem; }
+  dt { font-weight: var(--font-weight-bold, 600); margin-top: .75rem; color: var(--text, #000); }
+  dt:first-child { margin-top: 0; }
+  dd { margin: .1rem 0 .2rem 1rem; }
+  dd .dl-field { font-size: var(--small-font, 16px); color: var(--text-muted, #666); font-weight: var(--font-weight-bold, 600); }
+  .dl-value { color: var(--text, #000); }
+
+  /* ── list ── */
+  ul.result-list { margin: .5rem 0 .5rem 1.5rem; }
+  ul.result-list li { margin: .2rem 0; }
+
+  /* ── meta ── */
+  .single-value { display: block; padding: var(--space-xl, 16px); font-size: var(--medium-font, 20px); }
+  .sol-subject-header {
+    margin: 0 0 .5rem;
+    padding: 0 0 .35rem;
+    font-size: var(--large-font, 24px);
+    color: var(--text, #222);
+    border-bottom: 1px solid var(--border, #e4e4e4);
+  }
+  .loading { padding: var(--space-xl, 16px); color: var(--text-muted, #666); }
+  .error {
+    padding: var(--space-xl, 16px);
+    color: var(--error, #c00);
+    background-color: color-mix(in srgb, var(--error, #e74c3c) 12%, transparent);
+    border: 1px solid var(--error, #fcc);
+    border-radius: var(--radius-sm, 4px);
+  }
+  a { color: var(--query-link-color, var(--accent, #0066cc)); text-decoration: none; }
+  a:hover { text-decoration: underline; }
+  a.bnode-link { font-style: italic; color: var(--query-bnode-link-color, var(--text-muted, #777)); }
+  a.bnode-link:hover { color: var(--query-link-color, var(--accent, #0066cc)); }
+
+  /* ── subject nav + sections (multi-subject pivot) ── */
+  .subject-nav {
+    display: flex; flex-wrap: wrap; gap: var(--space-md, 8px);
+    padding: var(--space-md, 8px) 0 var(--space-lg, 12px);
+    border-bottom: 1px solid var(--border, #ddd);
+    margin-bottom: var(--space-lg, 12px);
+  }
+  .subject-nav a {
+    display: inline-block;
+    padding: var(--space-sm, 4px) var(--space-md, 8px);
+    border-radius: var(--radius-sm, 4px);
+    border: 1px solid var(--border, #ccc);
+    font-size: var(--small-font, 16px);
+    background: var(--surface, #f5f5f5);
+  }
+  .subject-nav a:hover {
+    background: var(--hover, #e8f0fe);
+    border-color: var(--accent, #4a9eff);
+  }
+  .subject-section { margin-bottom: 1.5rem; }
+  .subject-heading {
+    font-size: var(--medium-font, 20px);
+    font-weight: var(--font-weight-bold, 600);
+    margin: 0 0 .35rem;
+    padding-bottom: .25rem;
+    border-bottom: 1px solid var(--border, #eee);
+  }
+
+  /* ── blank-node modal ── */
+  .bnode-modal {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: var(--scrim, rgba(0,0,0,0.4));
+    z-index: 9999;
+    align-items: center;
+    justify-content: center;
+  }
+  .bnode-modal.active { display: flex; }
+  .bnode-modal-inner {
+    background: var(--surface, #fff);
+    color: var(--text, #212121);
+    border-radius: var(--radius-md, 6px);
+    padding: var(--space-xl, 16px) var(--space-2xl, 24px) var(--space-2xl, 24px);
+    max-width: var(--bnode-modal-max-width, min(90vw, 700px));
+    max-height: var(--bnode-modal-max-height, 80vh);
+    overflow: auto;
+    position: relative;
+    box-shadow: var(--shadow-modal, 0 8px 24px rgba(0,0,0,0.25));
+  }
+  .bnode-modal-body { overflow-x: auto; margin-top: var(--space-md, 8px); }
+  .bnode-modal-close {
+    position: absolute;
+    top: var(--space-md, 8px); right: var(--space-md, 8px);
+    border-radius: 50%;
+    width: 1.6rem; height: 1.6rem;
+    padding: 0;
+    font-size: var(--small-font, 16px); line-height: 1;
+  }
+`;
+
+export const sheet = sheetFrom(CSS);
+export default sheet;