anentrypoint-design 0.0.29 → 0.0.30

package/dist/247420.css

@@ -1968,3 +1968,239 @@
     font-size: 12.5px;
 }
 .ds-247420 .chat-md pre code { background: transparent; padding: 0; }
+
+
+/* ============================================================
+   File browser surfaces — FileRow, FileGrid, DropZone, FileViewer,
+   modals. Rail color is keyed by [data-file-type] so consumers
+   never apply .rail-* manually. The seven canonical types:
+   dir image video audio code text archive document (+symlink, other).
+   ============================================================ */
+
+.ds-247420 .ds-file-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    padding: var(--space-3) var(--space-4);
+    background: var(--panel-1);
+    border-radius: var(--r-3);
+    margin-bottom: var(--space-3);
+}
+.ds-247420 .ds-file-toolbar-left, .ds-247420 .ds-file-toolbar-right {
+    display: flex; align-items: center; gap: var(--space-2);
+}
+
+.ds-247420 .ds-file-grid {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+}
+
+.ds-247420 .ds-file-row {
+    display: grid;
+    grid-template-columns: auto 28px 1fr auto auto;
+    gap: var(--space-3);
+    align-items: center;
+    padding: var(--space-3) var(--space-4);
+    background: var(--panel-1);
+    border-radius: var(--r-3);
+    cursor: pointer;
+    transition: background var(--dur-snap) var(--ease);
+}
+.ds-247420 .ds-file-row:hover { background: var(--panel-hover); }
+.ds-247420 .ds-file-row.active { background: var(--panel-select); }
+.ds-247420 .ds-file-row > .code { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--panel-text-3); }
+.ds-247420 .ds-file-row > .title { font-weight: 500; color: var(--panel-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ds-247420 .ds-file-row > .meta { font-size: var(--fs-xs); color: var(--panel-text-3); white-space: nowrap; }
+
+.ds-247420 .ds-file-icon {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 28px; height: 28px;
+    font-family: var(--ff-mono);
+    font-size: 16px;
+    color: var(--panel-text-2);
+}
+
+/* File-type rail mapping — owned by [data-file-type] attribute */
+.ds-247420 .ds-file-row[data-file-type="image"]    { box-shadow: inset 4px 0 0 var(--sky); }
+.ds-247420 .ds-file-row[data-file-type="video"]    { box-shadow: inset 4px 0 0 var(--purple); }
+.ds-247420 .ds-file-row[data-file-type="audio"]    { box-shadow: inset 4px 0 0 var(--mascot); }
+.ds-247420 .ds-file-row[data-file-type="code"]     { box-shadow: inset 4px 0 0 var(--green); }
+.ds-247420 .ds-file-row[data-file-type="text"]     { box-shadow: inset 4px 0 0 var(--mascot); }
+.ds-247420 .ds-file-row[data-file-type="archive"]  { box-shadow: inset 4px 0 0 var(--flame); }
+.ds-247420 .ds-file-row[data-file-type="document"] { box-shadow: inset 4px 0 0 var(--sun); }
+.ds-247420 .ds-file-row[data-file-type="dir"]      { box-shadow: inset 4px 0 0 var(--green); }
+.ds-247420 .ds-file-row[data-file-type="symlink"]  { box-shadow: inset 4px 0 0 var(--sky); }
+.ds-247420 .ds-file-row[data-file-type="other"]    { box-shadow: inset 4px 0 0 var(--panel-text-3); }
+
+.ds-247420 .ds-file-icon[data-file-type="image"]    { color: var(--sky); }
+.ds-247420 .ds-file-icon[data-file-type="video"]    { color: var(--purple); }
+.ds-247420 .ds-file-icon[data-file-type="audio"]    { color: var(--mascot); }
+.ds-247420 .ds-file-icon[data-file-type="code"]     { color: var(--green); }
+.ds-247420 .ds-file-icon[data-file-type="text"]     { color: var(--mascot); }
+.ds-247420 .ds-file-icon[data-file-type="archive"]  { color: var(--flame); }
+.ds-247420 .ds-file-icon[data-file-type="document"] { color: var(--sun); }
+.ds-247420 .ds-file-icon[data-file-type="dir"]      { color: var(--green); }
+.ds-247420 .ds-file-icon[data-file-type="symlink"]  { color: var(--sky); }
+
+.ds-247420 .ds-file-actions { display: inline-flex; gap: 4px; }
+.ds-247420 .ds-file-act {
+    width: 28px; height: 28px;
+    display: inline-flex; align-items: center; justify-content: center;
+    background: transparent;
+    color: var(--panel-text-2);
+    border-radius: var(--r-1);
+    cursor: pointer;
+    font-size: 14px;
+    transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
+}
+.ds-247420 .ds-file-act:hover { background: var(--panel-2); color: var(--panel-text); }
+.ds-247420 .ds-file-act-warn:hover { background: var(--warn); color: var(--paper); }
+
+.ds-247420 .ds-file-empty {
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    padding: var(--space-7) var(--space-4);
+    gap: var(--space-2);
+    color: var(--panel-text-3);
+    background: var(--panel-1);
+    border-radius: var(--r-3);
+}
+.ds-247420 .ds-file-empty-glyph { font-family: var(--ff-mono); font-size: 32px; }
+.ds-247420 .ds-file-empty-text { font-size: var(--fs-sm); }
+
+/* DropZone */
+.ds-247420 .ds-dropzone {
+    display: block;
+    padding: var(--space-4);
+    border-radius: var(--r-3);
+    background: var(--panel-1);
+    transition: background var(--dur-snap) var(--ease), box-shadow var(--dur-snap) var(--ease);
+}
+.ds-247420 .ds-dropzone.dragover {
+    background: var(--panel-select);
+    box-shadow: inset 0 0 0 2px var(--green);
+}
+.ds-247420 .ds-dropzone-inner {
+    display: flex; align-items: center; gap: var(--space-3);
+}
+.ds-247420 .ds-dropzone-glyph { font-family: var(--ff-mono); font-size: 20px; color: var(--green); }
+.ds-247420 .ds-dropzone-label { color: var(--panel-text-2); font-size: var(--fs-sm); flex: 1; }
+
+/* Upload progress */
+.ds-247420 .ds-upload-progress {
+    display: flex; flex-direction: column; gap: var(--space-2);
+    padding: var(--space-3) var(--space-4);
+    background: var(--panel-1);
+    border-radius: var(--r-3);
+    margin-top: var(--space-3);
+}
+.ds-247420 .ds-upload-item { display: grid; grid-template-columns: 1fr 120px 40px; gap: var(--space-3); align-items: center; }
+.ds-247420 .ds-upload-name { font-size: var(--fs-xs); color: var(--panel-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ds-247420 .ds-upload-bar { position: relative; height: 6px; background: var(--panel-2); border-radius: var(--r-pill); overflow: hidden; }
+.ds-247420 .ds-upload-fill {
+    position: absolute; left: 0; top: 0; bottom: 0;
+    background: var(--green);
+    width: 0%;
+    transition: width var(--dur-base) var(--ease);
+}
+/* Width set via attr — generated runtime via inline style is the only carve-out the kit allows. */
+.ds-247420 .ds-upload-fill[data-pct="0"] { width: 0%; }
+.ds-247420 .ds-upload-fill[data-pct="10"] { width: 10%; } .ds-247420 .ds-upload-fill[data-pct="20"] { width: 20%; }
+.ds-247420 .ds-upload-fill[data-pct="30"] { width: 30%; } .ds-247420 .ds-upload-fill[data-pct="40"] { width: 40%; }
+.ds-247420 .ds-upload-fill[data-pct="50"] { width: 50%; } .ds-247420 .ds-upload-fill[data-pct="60"] { width: 60%; }
+.ds-247420 .ds-upload-fill[data-pct="70"] { width: 70%; } .ds-247420 .ds-upload-fill[data-pct="80"] { width: 80%; }
+.ds-247420 .ds-upload-fill[data-pct="90"] { width: 90%; } .ds-247420 .ds-upload-fill[data-pct="100"] { width: 100%; }
+.ds-247420 .ds-upload-pct { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--panel-text-3); text-align: right; }
+.ds-247420 .ds-upload-item.done .ds-upload-fill { background: var(--live); }
+.ds-247420 .ds-upload-item.error .ds-upload-fill { background: var(--warn); }
+
+/* BreadcrumbPath */
+.ds-247420 .ds-crumb-path { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: var(--fs-sm); }
+.ds-247420 .ds-crumb-seg {
+    background: transparent; color: var(--panel-text-2);
+    padding: var(--space-1) var(--space-2); border-radius: var(--r-1);
+    cursor: pointer; font-family: var(--ff-ui); font-size: var(--fs-sm);
+    transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
+}
+.ds-247420 .ds-crumb-seg:hover { background: var(--panel-2); color: var(--panel-text); }
+.ds-247420 .ds-crumb-seg.leaf { color: var(--panel-accent); font-weight: 600; }
+.ds-247420 .ds-crumb-sep { color: var(--panel-text-3); font-family: var(--ff-mono); }
+
+/* Modal backdrop & shells */
+.ds-247420 .ds-modal-backdrop {
+    position: fixed; inset: 0;
+    background: color-mix(in oklab, var(--ink) 55%, transparent);
+    display: flex; align-items: center; justify-content: center;
+    padding: var(--space-4);
+    z-index: 1000;
+}
+.ds-247420 .ds-modal {
+    background: var(--panel-1);
+    color: var(--panel-text);
+    border-radius: var(--r-3);
+    padding: 0;
+    max-width: min(92vw, 560px);
+    max-height: 92vh;
+    overflow: hidden;
+    display: flex; flex-direction: column;
+}
+.ds-247420 .ds-modal-small { max-width: min(92vw, 420px); }
+.ds-247420 .ds-modal-preview { max-width: min(96vw, 1080px); width: 100%; }
+.ds-247420 .ds-modal-head {
+    padding: var(--space-3) var(--space-4);
+    background: var(--panel-2);
+    font-weight: 600;
+    display: flex; align-items: center; gap: var(--space-3);
+}
+.ds-247420 .ds-modal-body {
+    padding: var(--space-4);
+    overflow: auto;
+}
+.ds-247420 .ds-modal-actions {
+    padding: var(--space-3) var(--space-4);
+    background: var(--panel-2);
+    display: flex; gap: var(--space-2); justify-content: flex-end;
+}
+.ds-247420 .ds-modal-input { width: 100%; }
+
+/* FileViewer */
+.ds-247420 .ds-preview-head { box-shadow: inset 4px 0 0 var(--panel-text-3); }
+.ds-247420 .ds-preview-head[data-file-type="image"]    { box-shadow: inset 4px 0 0 var(--sky); }
+.ds-247420 .ds-preview-head[data-file-type="video"]    { box-shadow: inset 4px 0 0 var(--purple); }
+.ds-247420 .ds-preview-head[data-file-type="audio"]    { box-shadow: inset 4px 0 0 var(--mascot); }
+.ds-247420 .ds-preview-head[data-file-type="code"]     { box-shadow: inset 4px 0 0 var(--green); }
+.ds-247420 .ds-preview-head[data-file-type="text"]     { box-shadow: inset 4px 0 0 var(--mascot); }
+.ds-247420 .ds-preview-head[data-file-type="archive"]  { box-shadow: inset 4px 0 0 var(--flame); }
+.ds-247420 .ds-preview-head[data-file-type="document"] { box-shadow: inset 4px 0 0 var(--sun); }
+.ds-247420 .ds-preview-name { flex: 1; font-family: var(--ff-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ds-247420 .ds-preview-meta { color: var(--panel-text-3); font-size: var(--fs-xs); font-family: var(--ff-mono); }
+.ds-247420 .ds-preview-actions { display: inline-flex; gap: 4px; }
+.ds-247420 .ds-preview-body {
+    flex: 1; overflow: auto;
+    background: var(--panel-0);
+    padding: var(--space-3);
+    min-height: 200px;
+    display: flex; align-items: center; justify-content: center;
+}
+.ds-247420 .ds-preview-body[data-file-type="code"], .ds-247420 .ds-preview-body[data-file-type="text"] {
+    align-items: stretch; justify-content: stretch; padding: 0;
+}
+.ds-247420 .ds-preview-media { max-width: 100%; max-height: 70vh; display: block; }
+.ds-247420 .ds-preview-audio { width: 100%; }
+.ds-247420 .ds-preview-fallback { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--panel-text-3); padding: var(--space-6); }
+.ds-247420 .ds-preview-glyph { font-family: var(--ff-mono); font-size: 48px; color: var(--panel-text-3); }
+.ds-247420 .ds-preview-code, .ds-247420 .ds-preview-text {
+    margin: 0;
+    padding: var(--space-4);
+    background: var(--panel-2);
+    color: var(--panel-text);
+    font-family: var(--ff-mono);
+    font-size: 12.5px;
+    line-height: 1.55;
+    overflow: auto;
+    width: 100%;
+    max-height: 70vh;
+}
+.ds-247420 .ds-preview-code code, .ds-247420 .ds-preview-text code { background: transparent; padding: 0; font-size: inherit; }
+.ds-247420 .ds-preview-truncated { color: var(--panel-text-3); font-style: italic; padding: var(--space-2) 0 0 0; }