@brftech/filex-core 0.4.2 → 0.6.0

package/src/styles/base.css

@@ -2405,3 +2405,1213 @@ filex-explorer {
     }
   }
 }
+
+/* wiring:c2 — shortcut settings modal + quick-look hint bar */
+
+.fe-shortcuts__unbound {
+  font-size: 12px;
+  font-style: italic;
+  color: var(--fe-text-muted);
+}
+.fe-shortcuts__custom {
+  margin-left: 4px;
+  font-size: 9px;
+  vertical-align: 2px;
+  color: var(--fe-primary);
+}
+
+.fe-shortset {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.fe-shortset__topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.fe-shortset__hint {
+  margin: 0;
+  font-size: 12px;
+  color: var(--fe-text-muted);
+  flex: 1 1 auto;
+}
+.fe-shortset__reset-all {
+  flex: 0 0 auto;
+}
+.fe-shortset__group {
+  display: flex;
+  flex-direction: column;
+}
+.fe-shortset__item {
+  border-radius: var(--fe-radius-sm);
+  padding: 2px 6px;
+  margin: 0 -6px;
+}
+.fe-shortset__item.is-capturing {
+  background: var(--fe-bg-hover);
+  outline: 1px dashed var(--fe-primary);
+  outline-offset: -1px;
+}
+.fe-shortset__item.is-conflict {
+  background: color-mix(in srgb, var(--fe-danger) 8%, transparent);
+  outline: 1px solid var(--fe-danger);
+  outline-offset: -1px;
+}
+.fe-shortset__row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 4px 0;
+  min-height: 34px;
+}
+.fe-shortset__label {
+  flex: 1 1 auto;
+  font-size: 13px;
+  color: var(--fe-text);
+}
+.fe-shortset__keys {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+.fe-shortset__capture {
+  font-size: 12px;
+  color: var(--fe-primary);
+  animation: fe-shortset-blink 1.1s ease-in-out infinite;
+}
+@keyframes fe-shortset-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.45; }
+}
+.fe-shortset__actions {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 118px;
+  justify-content: flex-end;
+}
+.fe-shortset__btn {
+  padding: 3px 9px;
+  font-size: 12px;
+}
+.fe-shortset__fixed {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--fe-text-muted);
+  border: 1px solid var(--fe-border);
+  border-radius: var(--fe-radius-sm);
+  padding: 2px 7px;
+}
+.fe-shortset__conflict {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  padding: 6px 2px 8px;
+  font-size: 12.5px;
+  color: var(--fe-danger);
+}
+.fe-shortset__conflict-msg {
+  flex: 1 1 auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 200px;
+}
+.fe-shortset__conflict-actions {
+  flex: 0 0 auto;
+  display: flex;
+  gap: 6px;
+}
+
+/* Quick-look hint bar — floats above the PreviewModal backdrop (z 70).
+ * Carries the `.fe` class for the theme-variable cascade, so the `.fe`
+ * root layout defaults (column flex, min-height 420px, 100% height)
+ * must be explicitly neutralised here. */
+.fe-ql-hint {
+  position: fixed;
+  left: 50%;
+  bottom: 14px;
+  transform: translateX(-50%);
+  z-index: 72;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  width: auto;
+  height: auto;
+  min-height: 0;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 999px;
+  border: 1px solid var(--fe-border);
+  background: var(--fe-bg-elev);
+  color: var(--fe-text-muted);
+  font-size: 12px;
+  box-shadow: var(--fe-shadow);
+  pointer-events: none;
+  white-space: nowrap;
+}
+.fe-ql-hint .fe-kbd {
+  font-size: 10.5px;
+  padding: 1px 5px;
+}
+.fe-ql-hint__sep {
+  opacity: 0.5;
+}
+/* /wiring:c2 */
+/* =========================================================
+ * wiring:c3 — Operations center (unified upload + ops-queue surface)
+ * Badge bottom-right (count + aggregate progress ring), expanding
+ * panel with active ops + session history. Replaces the old
+ * .fe-upload / .fe-ops corner trays (those components are now
+ * renderless publishers — their CSS above is retained but unused).
+ * ================================================================ */
+
+.fe-opc {
+  position: absolute;
+  right: 16px;
+  bottom: 16px;
+  z-index: 45;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 10px;
+  max-width: calc(100% - 32px);
+}
+
+.fe-opc__badge {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 14px 8px 10px;
+  border-radius: 999px;
+  border: 1px solid var(--fe-border);
+  background: var(--fe-bg);
+  color: var(--fe-text);
+  box-shadow: var(--fe-shadow);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  line-height: 1;
+}
+.fe-opc__badge:hover {
+  background: var(--fe-bg-hover);
+}
+.fe-opc__badge:focus-visible {
+  outline: 2px solid var(--fe-primary);
+  outline-offset: 2px;
+}
+.fe-opc__badge.is-error {
+  border-color: var(--fe-danger);
+}
+.fe-opc__badge.is-error .fe-opc__count {
+  color: var(--fe-danger);
+}
+
+.fe-opc__ring {
+  width: 22px;
+  height: 22px;
+  flex: 0 0 auto;
+}
+.fe-opc__ring-track {
+  stroke: var(--fe-border-strong);
+}
+.fe-opc__ring-fill {
+  stroke: var(--fe-primary);
+  transition: stroke-dashoffset 0.25s;
+}
+.fe-opc__badge.is-error .fe-opc__ring-fill {
+  stroke: var(--fe-danger);
+}
+.fe-opc__ring--spin {
+  animation: fe-opc-spin 1s linear infinite;
+}
+@keyframes fe-opc-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.fe-opc__count {
+  font-weight: 600;
+}
+.fe-opc__pct {
+  color: var(--fe-text-muted);
+  font-size: 12px;
+}
+
+.fe-opc__panel {
+  width: min(380px, calc(100vw - 32px));
+  max-width: 100%;
+  max-height: min(420px, 60vh);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--fe-bg);
+  border: 1px solid var(--fe-border);
+  border-radius: var(--fe-radius-lg);
+  box-shadow: var(--fe-shadow);
+}
+.fe-opc__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  background: var(--fe-bg-elev);
+  border-bottom: 1px solid var(--fe-border);
+  font-size: 13px;
+}
+.fe-opc__body {
+  overflow: auto;
+  padding: 6px 0 8px;
+}
+.fe-opc__section + .fe-opc__section {
+  border-top: 1px solid var(--fe-border);
+  margin-top: 6px;
+}
+.fe-opc__section-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0;
+  padding: 8px 14px 4px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--fe-text-muted);
+}
+.fe-opc__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.fe-opc__item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 8px 14px;
+}
+.fe-opc__item + .fe-opc__item {
+  border-top: 1px solid var(--fe-border);
+}
+.fe-opc__item.is-error {
+  background: color-mix(in srgb, var(--fe-danger) 7%, transparent);
+}
+.fe-opc__kicon {
+  width: 18px;
+  height: 18px;
+  flex: 0 0 auto;
+  margin-top: 2px;
+  color: var(--fe-text-muted);
+}
+.fe-opc__item.is-error .fe-opc__kicon {
+  color: var(--fe-danger);
+}
+.fe-opc__mid {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.fe-opc__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px;
+}
+.fe-opc__sub {
+  display: flex;
+  align-items: baseline;
+  gap: 5px;
+  font-size: 11px;
+  color: var(--fe-text-muted);
+  margin-top: 1px;
+  min-width: 0;
+}
+.fe-opc__sub--err,
+.fe-opc__item.is-error .fe-opc__state {
+  color: var(--fe-danger);
+}
+.fe-opc__state {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.fe-opc__bar {
+  background: var(--fe-bg-elev);
+  border-radius: 99px;
+  height: 5px;
+  overflow: hidden;
+  margin-top: 5px;
+}
+.fe-opc__bar-fill {
+  background: var(--fe-primary);
+  height: 100%;
+  transition: width 0.2s;
+}
+.fe-opc__spin {
+  flex: 0 0 auto;
+  width: 14px;
+  height: 14px;
+  margin-top: 4px;
+  border-radius: 50%;
+  border: 2px solid var(--fe-border-strong);
+  border-top-color: var(--fe-primary);
+  animation: fe-opc-spin 0.8s linear infinite;
+}
+.fe-opc__acts {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex: 0 0 auto;
+}
+.fe-opc__act {
+  background: transparent;
+  border: 0;
+  color: var(--fe-primary);
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  padding: 2px 4px;
+  border-radius: var(--fe-radius-sm);
+}
+.fe-opc__act:hover {
+  background: var(--fe-bg-hover);
+}
+.fe-opc__act--retry {
+  font-weight: 600;
+}
+.fe-opc__x {
+  background: transparent;
+  border: 0;
+  color: var(--fe-text-muted);
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  padding: 0 4px;
+  border-radius: var(--fe-radius-sm);
+}
+.fe-opc__x:hover {
+  color: var(--fe-text);
+}
+.fe-opc__item--history .fe-opc__name {
+  font-size: 12px;
+  color: var(--fe-text-muted);
+}
+.fe-opc__chip {
+  flex: 0 0 auto;
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 7px;
+  border-radius: 999px;
+  background: var(--fe-bg-elev);
+  color: var(--fe-text-muted);
+}
+.fe-opc__chip.is-done {
+  color: var(--fe-ok, #16a34a);
+  background: color-mix(in srgb, var(--fe-ok, #16a34a) 12%, transparent);
+}
+.fe-opc__chip.is-error {
+  color: var(--fe-danger);
+  background: color-mix(in srgb, var(--fe-danger) 12%, transparent);
+}
+.fe-opc__item.is-done .fe-opc__bar-fill {
+  background: var(--fe-ok, #16a34a);
+}
+.fe-opc__empty {
+  margin: 0;
+  padding: 16px 14px;
+  font-size: 12px;
+  color: var(--fe-text-muted);
+  text-align: center;
+}
+
+.fe-opc-pop-enter-active,
+.fe-opc-pop-leave-active {
+  transition: transform 0.16s ease, opacity 0.16s ease;
+}
+.fe-opc-pop-enter-from,
+.fe-opc-pop-leave-to {
+  opacity: 0;
+  transform: translateY(8px) scale(0.98);
+}
+
+/* Narrow / embedded: clear the FAB and behave like a bottom sheet —
+ * badge stays compact at the right, panel stretches edge to edge. */
+.fe--narrow .fe-opc {
+  left: 12px;
+  right: 12px;
+  bottom: 84px;
+  max-width: none;
+}
+.fe--narrow .fe-opc__panel {
+  width: 100%;
+  max-height: 50vh;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fe-opc__ring--spin,
+  .fe-opc__spin {
+    animation-duration: 3s;
+  }
+  .fe-opc-pop-enter-active,
+  .fe-opc-pop-leave-active {
+    transition: none;
+  }
+}
+/* /wiring:c3 */
+=======
+/* === wiring:c4 — onboarding turu, erişilebilirlik ve etkileşim cilası === */
+
+/* ---------- Focus ring: grid cards (list rows already had one) ---------- */
+.fe-grid__card:focus-visible {
+  outline: 2px solid var(--fe-primary);
+  outline-offset: 2px;
+}
+.fe-ctx__item:focus-visible {
+  outline: 2px solid var(--fe-primary);
+  outline-offset: -2px;
+  background: var(--fe-bg-hover);
+}
+
+/* ---------- Drag & drop feedback ---------- */
+
+/* The folder currently hovered by an internal drag. Dashed ring + tinted
+   background so it reads differently from plain selection. */
+.fe-list__row.is-droptarget,
+.fe-grid__card.is-droptarget {
+  outline: 2px dashed var(--fe-primary);
+  outline-offset: -2px;
+  background: var(--fe-bg-selected);
+}
+.fe-grid__card.is-droptarget {
+  border-color: var(--fe-primary);
+}
+
+/* Custom drag ghost (lib/dragGhost.ts) — appended to <body>, themed via the
+   :root/.dark token publication. */
+.fe-dragghost {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  max-width: 260px;
+  padding: 6px 10px;
+  border: 1px solid var(--fe-border-strong);
+  border-radius: var(--fe-radius);
+  background: var(--fe-bg-elev);
+  color: var(--fe-text);
+  font-family: var(--fe-font);
+  font-size: 13px;
+  box-shadow: var(--fe-shadow-sm);
+  pointer-events: none;
+  z-index: 96;
+}
+.fe-dragghost__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.fe-dragghost__badge {
+  flex: 0 0 auto;
+  min-width: 20px;
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: var(--fe-primary);
+  color: var(--fe-text-on-primary);
+  font-size: 12px;
+  font-weight: 600;
+  text-align: center;
+}
+
+/* ---------- Error state: technical detail disclosure ---------- */
+.fe-state__details {
+  margin-top: 10px;
+  max-width: 480px;
+  font-size: 12px;
+  text-align: left;
+}
+.fe-state__details-summary {
+  cursor: pointer;
+  text-align: center;
+  color: var(--fe-text-muted);
+  user-select: none;
+}
+.fe-state__details-summary:focus-visible {
+  outline: 2px solid var(--fe-primary);
+  outline-offset: 2px;
+}
+.fe-state__details-pre {
+  margin: 8px 0 0;
+  padding: 8px 10px;
+  border: 1px solid var(--fe-border);
+  border-radius: var(--fe-radius-sm);
+  background: var(--fe-bg-elev);
+  font-family: var(--fe-font-mono);
+  font-size: 11px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 160px;
+  overflow: auto;
+}
+
+/* ---------- Onboarding tour ---------- */
+
+.fe-tour {
+  position: fixed;
+  inset: 0;
+  z-index: 96; /* above the command palette (95) */
+  color: var(--fe-text);
+  font-family: var(--fe-font);
+  font-size: 14px;
+}
+/* Spotlight cutout: the element itself is transparent; the dim layer is the
+   giant box-shadow around it. */
+.fe-tour__spot {
+  position: fixed;
+  border-radius: 10px;
+  box-shadow: 0 0 0 9999px rgba(13, 19, 27, 0.55);
+  border: 2px solid var(--fe-primary);
+  pointer-events: none;
+}
+.fe-tour__dim {
+  position: fixed;
+  inset: 0;
+  background: rgba(13, 19, 27, 0.55);
+  pointer-events: none;
+}
+.fe-tour__card {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  border: 1px solid var(--fe-border-strong);
+  border-radius: var(--fe-radius-lg);
+  background: var(--fe-bg);
+  color: var(--fe-text);
+  box-shadow: var(--fe-shadow);
+  outline: none;
+}
+.fe-tour__card--center {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: min(360px, calc(100vw - 24px));
+}
+.fe-tour__progress {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  color: var(--fe-text-muted);
+}
+.fe-tour__title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 700;
+}
+.fe-tour__desc {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--fe-text-muted);
+}
+.fe-tour__dots {
+  display: flex;
+  gap: 5px;
+  margin-top: 4px;
+}
+.fe-tour__dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--fe-border-strong);
+  transition: background 0.15s;
+}
+.fe-tour__dot.is-active {
+  background: var(--fe-primary);
+}
+.fe-tour__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+}
+.fe-tour__actions-spacer {
+  flex: 1 1 auto;
+}
+.fe-tour__skip {
+  color: var(--fe-text-muted);
+}
+.fe-tour-enter-active,
+.fe-tour-leave-active {
+  transition: opacity 0.16s ease;
+}
+.fe-tour-enter-from,
+.fe-tour-leave-to {
+  opacity: 0;
+}
+
+/* ---------- prefers-reduced-motion: quiet the remaining movers ---------- */
+@media (prefers-reduced-motion: reduce) {
+  .fe-tour-enter-active,
+  .fe-tour-leave-active,
+  .fe-ctx-enter-active,
+  .fe-ctx-leave-active,
+  .fe-sheet-enter-active,
+  .fe-sheet-leave-active,
+  .fe-toast-enter-active,
+  .fe-toast-leave-active {
+    transition: none !important;
+  }
+  .fe-list__row,
+  .fe-grid__card,
+  .fe-tour__dot,
+  .fe-list__col--star {
+    transition: none !important;
+  }
+}
+/* === /wiring:c4 === */
+
+/* === wiring:d1 — sekmeler (tab şeridi) + split panel === */
+
+/* Tab strip — thin row ABOVE the toolbar. The host renders it only with
+   2+ tabs, so the default single-tab embed stays pixel-identical. */
+.fe-tabs {
+  display: flex;
+  align-items: stretch;
+  gap: 4px;
+  flex: 0 0 auto;
+  padding: 4px 6px 0;
+  background: var(--fe-bg-elev);
+  border-bottom: 1px solid var(--fe-border);
+  user-select: none;
+}
+.fe-tabs__scroll {
+  display: flex;
+  align-items: stretch;
+  gap: 2px;
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: thin;
+}
+.fe-tabs__tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 180px;
+  min-width: 72px;
+  padding: 4px 6px 4px 10px;
+  font-size: 12px;
+  color: var(--fe-text-muted);
+  background: transparent;
+  border: 1px solid transparent;
+  border-bottom: none;
+  border-radius: 8px 8px 0 0;
+  cursor: pointer;
+  white-space: nowrap;
+  position: relative;
+}
+.fe-tabs__tab:hover {
+  background: var(--fe-bg-hover);
+  color: var(--fe-text);
+}
+.fe-tabs__tab.is-active {
+  background: var(--fe-bg);
+  color: var(--fe-text);
+  border-color: var(--fe-border);
+}
+/* Mask the strip's bottom border under the active tab (connected look). */
+.fe-tabs__tab.is-active::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px;
+  height: 1px;
+  background: var(--fe-bg);
+}
+.fe-tabs__tab.is-dragover {
+  outline: 1px dashed var(--fe-primary);
+  outline-offset: -2px;
+}
+.fe-tabs__tab:focus-visible {
+  outline: 2px solid var(--fe-primary);
+  outline-offset: -2px;
+}
+.fe-tabs__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.fe-tabs__splitdot {
+  width: 6px;
+  height: 6px;
+  border-radius: 2px;
+  background: var(--fe-primary);
+  flex: 0 0 auto;
+}
+.fe-tabs__close {
+  flex: 0 0 auto;
+  width: 16px;
+  height: 16px;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  font-size: 13px;
+  cursor: pointer;
+  padding: 0;
+}
+.fe-tabs__close:hover {
+  background: var(--fe-bg-hover);
+}
+.fe-tabs__new,
+.fe-tabs__split {
+  flex: 0 0 auto;
+  align-self: center;
+  width: 22px;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--fe-text-muted);
+  font-size: 15px;
+  cursor: pointer;
+  padding: 0;
+}
+.fe-tabs__split .fe-ficon {
+  width: 14px;
+  height: 14px;
+}
+.fe-tabs__new:hover,
+.fe-tabs__split:hover {
+  background: var(--fe-bg-hover);
+  color: var(--fe-text);
+}
+.fe-tabs__split.is-active {
+  background: var(--fe-bg-selected);
+  color: var(--fe-primary);
+  border-color: var(--fe-border);
+}
+/* Narrow embeds: split disabled — the host already hides the button via
+   prop; this is belt & braces. */
+.fe--narrow .fe-tabs__split {
+  display: none;
+}
+
+/* Split layout — equal halves inside fe__main; the inspector (koru:k1)
+   keeps its fixed width to the right of both. */
+.fe__main--split > .fe__body {
+  flex: 1 1 50%;
+}
+.fe-split {
+  flex: 1 1 50%;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid var(--fe-border);
+  background: var(--fe-bg);
+  color: var(--fe-text);
+}
+/* Active-panel accent: a thin top line on whichever pane owns the keyboard. */
+.fe__main--split > .fe__body,
+.fe-split {
+  box-shadow: inset 0 2px 0 transparent;
+}
+.fe__main--split > .fe__body.fe-pane--focus,
+.fe-split.fe-pane--focus {
+  box-shadow: inset 0 2px 0 var(--fe-primary);
+}
+
+.fe-split__crumbs {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex: 0 0 auto;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--fe-border);
+  font-size: 12px;
+  color: var(--fe-text-muted);
+  overflow: hidden;
+  white-space: nowrap;
+}
+.fe-split__crumb {
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  padding: 2px 5px;
+  border-radius: 5px;
+  cursor: pointer;
+  max-width: 140px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.fe-split__crumb:hover {
+  background: var(--fe-bg-hover);
+  color: var(--fe-text);
+}
+.fe-split__crumb.is-last {
+  color: var(--fe-text);
+  font-weight: 600;
+}
+.fe-split__sep {
+  opacity: 0.6;
+  flex: 0 0 auto;
+}
+.fe-split__spacer {
+  flex: 1 1 auto;
+}
+.fe-split__closebtn {
+  flex: 0 0 auto;
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--fe-text-muted);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 0;
+}
+.fe-split__closebtn:hover {
+  background: var(--fe-bg-hover);
+  color: var(--fe-text);
+}
+
+.fe-split__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  position: relative;
+}
+.fe-split__body.is-dropover {
+  outline: 2px dashed var(--fe-primary);
+  outline-offset: -4px;
+}
+.fe-split__list {
+  padding: 4px 0;
+}
+.fe-split__row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 10px;
+  font-size: 13px;
+  cursor: default;
+}
+.fe-split__row:hover {
+  background: var(--fe-bg-hover);
+}
+.fe-split__row.is-selected {
+  background: var(--fe-bg-selected);
+}
+.fe-split__row.is-droptarget {
+  outline: 1.5px dashed var(--fe-primary);
+  outline-offset: -2px;
+  border-radius: 6px;
+}
+.fe-split__row:focus-visible {
+  outline: 2px solid var(--fe-primary);
+  outline-offset: -2px;
+}
+.fe-split__icon {
+  flex: 0 0 auto;
+  width: 18px;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+}
+.fe-split__icon .fe-ficon {
+  width: 16px;
+  height: 16px;
+}
+.fe-split__name {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.fe-split__size {
+  flex: 0 0 auto;
+  color: var(--fe-text-muted);
+  font-size: 11.5px;
+}
+.fe-split__state {
+  padding: 24px 12px;
+  text-align: center;
+  color: var(--fe-text-muted);
+  font-size: 12.5px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+}
+/* === /wiring:d1 === */
+
+/* === wiring:d2 — galeri görünümü (GalleryView.vue) === */
+
+/* Büyük thumbnail ızgarası: kare kartlar, ad altta, boyut+tarih hover'da. */
+.fe-gal {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+  gap: var(--fe-gap);
+  padding: var(--fe-gap);
+}
+.fe-gal__card {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  border: 1px solid var(--fe-border);
+  border-radius: var(--fe-radius);
+  background: var(--fe-bg-elev);
+  cursor: pointer;
+  overflow: hidden;
+  transition: background 0.08s, border-color 0.08s;
+  user-select: none;
+}
+.fe-gal__card:hover {
+  background: var(--fe-bg-hover);
+  border-color: var(--fe-border-strong);
+}
+.fe-gal__card.is-selected {
+  background: var(--fe-bg-selected);
+  border-color: var(--fe-primary);
+}
+.fe-gal__card.is-trash {
+  opacity: 0.7;
+}
+.fe-gal__card.is-clipped {
+  opacity: 0.55;
+  border-style: dashed;
+}
+.fe-gal__card:focus-visible {
+  outline: 2px solid var(--fe-primary);
+  outline-offset: 2px;
+}
+.fe-gal__card.is-droptarget {
+  outline: 2px dashed var(--fe-primary);
+  outline-offset: -2px;
+  background: var(--fe-bg-selected);
+  border-color: var(--fe-primary);
+}
+.fe-gal__thumb {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1 / 1;
+  background: var(--fe-bg);
+  overflow: hidden;
+}
+.fe-gal__thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.fe-gal__icon {
+  font-size: 44px;
+}
+.fe-gal__icon--svg svg {
+  width: 64px;
+  height: 64px;
+}
+/* Hover meta bandı — thumbnail'ın altına oturan yarı saydam şerit; yalnız
+   hover/klavye odağında görünür (dokunmatikte kartın title'ı yeterli). */
+.fe-gal__meta {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding: 6px 8px;
+  font-size: 11px;
+  line-height: 1.35;
+  color: var(--fe-text);
+  background: color-mix(in srgb, var(--fe-bg-elev) 88%, transparent);
+  backdrop-filter: blur(2px);
+  opacity: 0;
+  transform: translateY(4px);
+  transition: opacity 0.12s ease, transform 0.12s ease;
+  pointer-events: none;
+}
+.fe-gal__card:hover .fe-gal__meta,
+.fe-gal__card:focus-visible .fe-gal__meta {
+  opacity: 1;
+  transform: translateY(0);
+}
+.fe-gal__meta-line {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.fe-gal__meta-line--path {
+  color: var(--fe-text-muted);
+  font-style: italic;
+}
+.fe-gal__label {
+  padding: 7px 9px;
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: center;
+}
+.fe-gal__empty {
+  grid-column: 1 / -1;
+  padding: 40px 20px;
+  text-align: center;
+  color: var(--fe-text-muted);
+}
+/* Dar/embed mini modda daha küçük döşemeler (2-3 sütun sığar). */
+.fe--narrow .fe-gal {
+  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+}
+/* Yoğunluk: kompakt tercihte döşemeler küçülür (grid'le aynı mantık). */
+.fe--density-compact .fe-gal {
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: calc(var(--fe-gap) * 0.6);
+}
+.fe--density-compact .fe-gal__label {
+  padding: 5px 7px;
+  font-size: 12px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .fe-gal__card,
+  .fe-gal__meta {
+    transition: none !important;
+    transform: none;
+  }
+}
+/* === /wiring:d2 === */
+
+/* === wiring:d3 — inspector Yorumlar (node comments) === */
+.fe-inspector__countbadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  margin-left: 6px;
+  border-radius: 8px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0;
+  background: var(--fe-bg-hover);
+  color: var(--fe-text);
+  vertical-align: middle;
+}
+
+.fe-inspector__comments {
+  list-style: none;
+  margin: 0 0 8px;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.fe-inspector__comment {
+  border: 1px solid var(--fe-border);
+  border-radius: 8px;
+  padding: 6px 8px;
+  background: var(--fe-bg);
+}
+.fe-inspector__comment-top {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  min-width: 0;
+}
+.fe-inspector__comment-author {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--fe-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+.fe-inspector__comment-time {
+  font-size: 11px;
+  color: var(--fe-text-muted);
+  flex: 1 1 auto;
+  white-space: nowrap;
+}
+.fe-inspector__comment-del {
+  border: none;
+  background: none;
+  color: var(--fe-text-muted);
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0 4px;
+  border-radius: 4px;
+  flex: 0 0 auto;
+}
+.fe-inspector__comment-del:hover {
+  background: var(--fe-bg-hover);
+  color: var(--fe-danger);
+}
+.fe-inspector__comment-del:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.fe-inspector__comment-body {
+  margin: 4px 0 0;
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--fe-text);
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.fe-inspector__comment-form {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+.fe-inspector__comment-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  border: 1px solid var(--fe-border);
+  border-radius: 8px;
+  background: var(--fe-bg);
+  color: var(--fe-text);
+  font: inherit;
+  font-size: 12px;
+  padding: 6px 8px;
+}
+.fe-inspector__comment-input:focus {
+  outline: none;
+  border-color: var(--fe-accent);
+}
+.fe-inspector__comment-input:disabled {
+  opacity: 0.6;
+}
+/* === /wiring:d3 === */