@fde-desktop/fde-core 0.3.8 → 0.4.1

package/dist/FilesApp-E6L5W3T2.css

@@ -0,0 +1,1817 @@
+/* src/components/Shared/FilePickerApp/FilePickerApp.module.css */
+.root {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+.breadcrumbBar {
+  flex-shrink: 0;
+  padding: 6px 10px;
+  border-bottom: 1px solid light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08));
+  background: light-dark(rgba(0, 0, 0, 0.02), rgba(255, 255, 255, 0.02));
+}
+.breadcrumbSep {
+  font-size: 12px;
+  color: var(--mantine-color-dimmed);
+}
+.body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+.sidebar {
+  width: 140px;
+  flex-shrink: 0;
+  border-right: 1px solid light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08));
+  overflow-y: auto;
+}
+.folderTree {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding: 4px 0;
+}
+.treeItem {
+  display: flex;
+  align-items: center;
+  padding: 5px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  user-select: none;
+  width: 100%;
+  transition: background 0.1s;
+}
+.treeItem:hover {
+  background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.07));
+}
+.treeItem[data-active] {
+  background: var(--mantine-primary-color-light);
+  color: var(--mantine-primary-color-filled);
+}
+.content {
+  flex: 1;
+  overflow-y: auto;
+  min-width: 0;
+}
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  gap: 4px;
+  padding: 8px;
+}
+.item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 6px;
+  border-radius: 6px;
+  width: 80px;
+  cursor: default;
+  user-select: none;
+  transition: background 0.1s;
+}
+.item:hover {
+  background: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.08));
+}
+.item[data-selected] {
+  background: var(--mantine-primary-color-light);
+  outline: 1px solid var(--mantine-primary-color-filled);
+}
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+}
+.name {
+  text-align: center;
+  width: 100%;
+  max-width: 72px;
+  word-break: break-word;
+  display: -webkit-box;
+  line-clamp: 2;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 24px;
+}
+.actionBar {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 12px;
+  border-top: 1px solid light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08));
+  background: light-dark(rgba(0, 0, 0, 0.02), rgba(255, 255, 255, 0.02));
+}
+.selectedLabel {
+  flex: 1;
+  min-width: 0;
+}
+.saveActionBar {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-top: 1px solid light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08));
+  background: light-dark(rgba(0, 0, 0, 0.02), rgba(255, 255, 255, 0.02));
+}
+.fileNameInput {
+  flex: 1;
+  min-width: 0;
+}
+.overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+.panel {
+  width: 580px;
+  height: 400px;
+  background: var(--mantine-color-body);
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+/* src/components/Apps/NotesApp/NotesApp.module.css */
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: var(--mantine-color-body);
+}
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--mantine-color-default-border);
+  background-color: var(--mantine-color-default);
+  flex-shrink: 0;
+}
+.toolbarBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid transparent;
+  border-radius: var(--mantine-radius-sm);
+  background: transparent;
+  color: var(--mantine-color-text);
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  flex-shrink: 0;
+  transition: background-color 80ms ease, border-color 80ms ease;
+}
+.toolbarBtn svg {
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+}
+.toolbarBtn:hover:not(:disabled) {
+  background-color: var(--mantine-color-default-hover);
+  border-color: var(--mantine-color-default-border);
+}
+.toolbarBtn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.toolbarBtn.active {
+  background-color: var(--mantine-color-blue-light);
+  border-color: var(--mantine-color-blue-light-hover);
+  color: var(--mantine-color-blue-light-color);
+}
+.separator {
+  width: 1px;
+  height: 18px;
+  background-color: var(--mantine-color-default-border);
+  margin: 0 4px;
+  flex-shrink: 0;
+}
+.editorContent {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 20px;
+}
+.editorContent :global(.ProseMirror) {
+  outline: none;
+  min-height: 100%;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--mantine-color-text);
+}
+.editorContent :global(.ProseMirror p) {
+  margin: 0 0 8px;
+}
+.editorContent :global(.ProseMirror h1) {
+  font-size: 1.8em;
+  font-weight: 700;
+  margin: 0 0 12px;
+  line-height: 1.2;
+}
+.editorContent :global(.ProseMirror h2) {
+  font-size: 1.4em;
+  font-weight: 600;
+  margin: 0 0 10px;
+  line-height: 1.3;
+}
+.editorContent :global(.ProseMirror h3) {
+  font-size: 1.2em;
+  font-weight: 600;
+  margin: 0 0 8px;
+}
+.editorContent :global(.ProseMirror ul),
+.editorContent :global(.ProseMirror ol) {
+  padding-left: 24px;
+  margin: 0 0 8px;
+}
+.editorContent :global(.ProseMirror li) {
+  margin-bottom: 2px;
+}
+.editorContent :global(.ProseMirror blockquote) {
+  border-left: 3px solid var(--mantine-color-blue-4);
+  padding-left: 12px;
+  margin: 0 0 8px;
+  color: var(--mantine-color-dimmed);
+  font-style: italic;
+}
+.editorContent :global(.ProseMirror code) {
+  font-family: "Courier New", monospace;
+  font-size: 0.9em;
+  background-color: var(--mantine-color-default-hover);
+  border-radius: 3px;
+  padding: 1px 4px;
+}
+.editorContent :global(.ProseMirror pre) {
+  background-color: var(--mantine-color-dark-7, #1a1a2e);
+  color: var(--mantine-color-gray-1, #f0f0f0);
+  border-radius: var(--mantine-radius-sm);
+  padding: 12px 16px;
+  margin: 0 0 12px;
+  overflow-x: auto;
+}
+.editorContent :global(.ProseMirror pre code) {
+  background: none;
+  padding: 0;
+  font-size: 0.875em;
+}
+.editorContent :global(.ProseMirror hr) {
+  border: none;
+  border-top: 2px solid var(--mantine-color-default-border);
+  margin: 16px 0;
+}
+.editorContent :global(.ProseMirror strong) {
+  font-weight: 700;
+}
+.editorContent :global(.ProseMirror em) {
+  font-style: italic;
+}
+.editorContent :global(.ProseMirror s) {
+  text-decoration: line-through;
+}
+.editorContent :global(.ProseMirror p.is-editor-empty:first-child::before) {
+  content: attr(data-placeholder);
+  color: var(--mantine-color-dimmed);
+  pointer-events: none;
+  float: left;
+  height: 0;
+}
+
+/* src/components/Shared/AppEmptyState/AppEmptyState.module.css */
+.root {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.container {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  width: 300px;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.item {
+  width: 100px;
+  height: 100px;
+  border-radius: 10px;
+}
+.label {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #fff;
+  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
+  letter-spacing: 0.04em;
+  pointer-events: none;
+}
+
+/* src/components/Apps/ImageViewerApp/ImageViewerApp.module.css */
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--mantine-color-dark-9, #1a1a1a);
+  overflow: hidden;
+}
+.image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  display: block;
+}
+.placeholder {
+  color: var(--mantine-color-dimmed);
+  text-align: center;
+}
+
+/* src/components/Apps/PdfApp/PdfApp.module.css */
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.frame {
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+}
+
+/* src/hooks/useDragDrop/DragOverlay.module.css */
+.dragOverlay {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 12px;
+  border-radius: 4px;
+  background: var(--mantine-color-gray-1);
+  box-shadow: var(--mantine-shadow-md);
+  pointer-events: none;
+}
+[data-mantine-color-scheme=dark] .dragOverlay {
+  background: var(--mantine-color-dark-5);
+}
+
+/* src/components/Apps/MenuEditApp/MenuEditApp.module.css */
+.container {
+  padding: 16px;
+  height: 100%;
+  overflow-y: auto;
+}
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.folderList {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.folderCard {
+  transition: box-shadow 0.15s ease;
+}
+.folderCard[data-is-over=true] {
+  box-shadow: var(--mantine-shadow-md);
+  outline: 2px solid var(--mantine-color-blue-5);
+}
+.folderHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--mantine-color-gray-2);
+}
+[data-mantine-color-scheme=dark] .folderHeader {
+  border-bottom-color: var(--mantine-color-dark-4);
+}
+.appList {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 8px 12px;
+  min-height: 40px;
+}
+.availableApps {
+  margin-top: 16px;
+}
+.availableApps[data-is-over=true] {
+  box-shadow: var(--mantine-shadow-md);
+  outline: 2px solid var(--mantine-color-blue-5);
+}
+.appGrid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.appItem {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 8px;
+  border-radius: 4px;
+  cursor: grab;
+  transition: background-color 0.15s ease, opacity 0.15s ease;
+  min-width: 60px;
+  user-select: none;
+}
+.appItem:hover {
+  background-color: var(--mantine-color-gray-1);
+}
+[data-mantine-color-scheme=dark] .appItem:hover {
+  background-color: var(--mantine-color-dark-5);
+}
+.appItem:active {
+  cursor: grabbing;
+  opacity: 0.7;
+}
+.appItem[data-dragging=true] {
+  opacity: 0.5;
+}
+
+/* src/components/Shared/DownloadProgress/DownloadProgress.module.css */
+.spinner {
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* src/components/Apps/UploaderApp/UploaderApp.module.css */
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  overflow: hidden;
+}
+.backgroundIcon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0.1;
+  filter: blur(1px);
+  pointer-events: none;
+}
+.stepper {
+  position: relative;
+  z-index: 1;
+  max-width: 500px;
+  width: 100%;
+}
+.fileInfo {
+  padding: 8px 12px;
+  background: light-dark(rgba(0, 0, 0, 0.02), rgba(255, 255, 255, 0.02));
+  border-radius: 4px;
+  margin-top: 8px;
+}
+.resultPaper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 24px;
+  border-radius: 8px;
+}
+.resultIcon {
+  margin-bottom: 16px;
+}
+.readyContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 16px 0;
+}
+
+/* src/components/Shared/ColorPicker/ColorPicker.module.css */
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.colorRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.colorSwatch {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: transform 0.1s, border-color 0.1s;
+}
+.colorSwatch:hover:not([data-disabled]) {
+  transform: scale(1.15);
+}
+.colorSwatch[data-selected] {
+  border-color: var(--mantine-color-text);
+  transform: scale(1.15);
+}
+.colorSwatch[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.colorInput {
+  margin-top: 2px;
+}
+
+/* src/components/Shared/LanguageFlag/LanguageFlag.module.css */
+.container {
+  display: inline-flex;
+  border-radius: 2px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.flag {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+/* src/components/Apps/SettingsApp/SettingsApp.module.css */
+.root {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+.sidebar {
+  width: 160px;
+  flex-shrink: 0;
+  border-right: 1px solid light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08));
+  overflow-y: auto;
+  padding: 4px 0;
+}
+.navItem {
+  display: flex;
+  align-items: center;
+  padding: 5px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  user-select: none;
+  width: 100%;
+  transition: background 0.1s;
+  background: transparent;
+  border: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+.navItem:hover {
+  background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.07));
+}
+.navItem[data-active] {
+  background: var(--mantine-primary-color-light);
+  color: var(--mantine-primary-color-filled);
+}
+.content {
+  flex: 1;
+  overflow-y: auto;
+  min-width: 0;
+}
+.overviewPadding {
+  padding: 16px;
+}
+.sectionCard {
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.sectionCard:hover {
+  background: light-dark(rgba(0, 0, 0, 0.03), rgba(255, 255, 255, 0.04));
+}
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 6px 12px;
+  border-bottom: 1px solid light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08));
+  background-color: light-dark(#f8f9fa, #1a1b1e);
+  flex-shrink: 0;
+}
+.dirtyIndicator {
+  color: var(--mantine-color-orange-6);
+  font-size: 10px;
+  line-height: 1;
+  margin-left: auto;
+}
+.versionFooter {
+  padding-top: 12px;
+  opacity: 0.6;
+}
+
+/* src/components/Apps/DeviceInfoApp/DeviceInfoApp.module.css */
+.container {
+  padding: 16px;
+  height: 100%;
+  overflow: auto;
+  background: var(--mantine-color-body);
+}
+
+/* ../../node_modules/.bun/@mantine+dates@9.0.0+7c0e6e23d8f8fc3c/node_modules/@mantine/dates/styles.css */
+.m_468e7eda {
+  padding-top: 0;
+  padding-bottom: 0;
+  appearance: none;
+}
+.m_468e7eda::-webkit-calendar-picker-indicator {
+  display: none;
+}
+.m_468e7eda::-webkit-clear-button {
+  display: none;
+}
+.m_468e7eda::-webkit-datetime-edit-hour-field,
+.m_468e7eda::-webkit-datetime-edit-minute-field,
+.m_468e7eda::-webkit-datetime-edit-second-field,
+.m_468e7eda::-webkit-datetime-edit-ampm-field {
+  padding-top: 0;
+  max-height: calc(1.875rem * var(--mantine-scale));
+  display: inline;
+}
+.m_468e7eda::-webkit-datetime-edit-hour-field:focus,
+.m_468e7eda::-webkit-datetime-edit-minute-field:focus,
+.m_468e7eda::-webkit-datetime-edit-second-field:focus,
+.m_468e7eda::-webkit-datetime-edit-ampm-field:focus {
+  background-color: var(--mantine-primary-color-filled);
+  color: var(--mantine-color-white);
+}
+.m_7a8f1e6d {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  overflow: hidden;
+}
+:where([dir=rtl]) .m_7a8f1e6d {
+  flex-direction: row-reverse;
+}
+.m_d6bb0a54 {
+  display: flex;
+  align-items: center;
+  height: calc(var(--input-height) - 15px);
+}
+.m_b97ecb26 {
+  display: flex;
+  flex-direction: column;
+}
+.m_31fe42f9 {
+  display: flex;
+  gap: calc(0.25rem * var(--mantine-scale));
+}
+.m_9c4817c3 {
+  padding: calc(0.25rem * var(--mantine-scale));
+}
+.m_154c536b {
+  text-align: center;
+  min-width: 2.5em;
+  width: max-content;
+  height: 2em;
+  border-radius: var(--mantine-radius-default);
+  font-size: var(--control-font-size, var(--mantine-font-size-sm));
+}
+.m_154c536b:where([data-active]) {
+  background-color: var(--mantine-primary-color-filled);
+  color: var(--mantine-color-white);
+}
+@media (hover: hover) {
+  .m_154c536b:hover:where(:not([data-active])) {
+    color: var(--mantine-color-bright);
+  }
+  :where([data-mantine-color-scheme=dark]) .m_154c536b:hover:where(:not([data-active])) {
+    background-color: var(--mantine-color-dark-5);
+  }
+  :where([data-mantine-color-scheme=light]) .m_154c536b:hover:where(:not([data-active])) {
+    background-color: var(--mantine-color-gray-1);
+  }
+}
+@media (hover: none) {
+  .m_154c536b:active:where(:not([data-active])) {
+    color: var(--mantine-color-bright);
+  }
+  :where([data-mantine-color-scheme=dark]) .m_154c536b:active:where(:not([data-active])) {
+    background-color: var(--mantine-color-dark-5);
+  }
+  :where([data-mantine-color-scheme=light]) .m_154c536b:active:where(:not([data-active])) {
+    background-color: var(--mantine-color-gray-1);
+  }
+}
+.m_7be09d0c {
+  text-align: center;
+  height: 2em;
+  padding-inline: 0.5em;
+  border-radius: var(--mantine-radius-default);
+  font-size: var(--control-font-size, var(--mantine-font-size-sm));
+}
+.m_7be09d0c:where([data-active]) {
+  background-color: var(--mantine-primary-color-filled);
+  color: var(--mantine-color-white);
+}
+@media (hover: hover) {
+  .m_7be09d0c:hover:where(:not([data-active])) {
+    color: var(--mantine-color-bright);
+  }
+  :where([data-mantine-color-scheme=dark]) .m_7be09d0c:hover:where(:not([data-active])) {
+    background-color: var(--mantine-color-dark-5);
+  }
+  :where([data-mantine-color-scheme=light]) .m_7be09d0c:hover:where(:not([data-active])) {
+    background-color: var(--mantine-color-gray-1);
+  }
+}
+@media (hover: none) {
+  .m_7be09d0c:active:where(:not([data-active])) {
+    color: var(--mantine-color-bright);
+  }
+  :where([data-mantine-color-scheme=dark]) .m_7be09d0c:active:where(:not([data-active])) {
+    background-color: var(--mantine-color-dark-5);
+  }
+  :where([data-mantine-color-scheme=light]) .m_7be09d0c:active:where(:not([data-active])) {
+    background-color: var(--mantine-color-gray-1);
+  }
+}
+.m_7d00001d + .m_7d00001d {
+  margin-top: var(--mantine-spacing-sm);
+}
+.m_d8d918d7 {
+  margin-bottom: calc(0.25rem * var(--mantine-scale));
+  color: var(--mantine-color-dimmed);
+  font-size: calc(var(--control-font-size, var(--mantine-font-size-sm)) - 2px);
+  font-weight: var(--mantine-font-weight-medium);
+  display: flex;
+  align-items: center;
+  padding-inline-start: calc(0.4375rem * var(--mantine-scale));
+}
+.m_d8d918d7::after {
+  content: "";
+  width: 100%;
+  height: calc(0.0625rem * var(--mantine-scale));
+  flex: 1;
+  margin-inline-start: var(--mantine-spacing-xs);
+}
+:where([data-mantine-color-scheme=light]) .m_d8d918d7::after {
+  background-color: var(--mantine-color-gray-2);
+}
+:where([data-mantine-color-scheme=dark]) .m_d8d918d7::after {
+  background-color: var(--mantine-color-dark-4);
+}
+.m_6b43ba88 {
+  width: calc(2ch + 0.3em);
+  caret-color: transparent;
+  font-variant-numeric: tabular-nums;
+  position: relative;
+  height: 100%;
+  line-height: 1;
+  padding-inline: 0.15em;
+  border: 0;
+  text-align: center;
+  text-align-last: center;
+  background-color: transparent;
+  color: var(--input-color);
+  border-radius: calc(0.125rem * var(--mantine-scale));
+  appearance: none;
+}
+.m_6b43ba88:where([data-am-pm]) {
+  width: auto;
+}
+.m_6b43ba88:where(:disabled) {
+  cursor: not-allowed;
+}
+.m_6b43ba88::selection {
+  background-color: transparent;
+}
+.m_6b43ba88::placeholder {
+  opacity: 1;
+  color: inherit;
+}
+.m_6b43ba88:focus {
+  background-color: var(--mantine-primary-color-filled);
+  color: var(--mantine-color-white);
+  outline: 0;
+}
+.m_6b43ba88:focus::placeholder {
+  color: var(--mantine-color-white);
+}
+.m_396ce5cb {
+  --day-size-xs: calc(1.875rem * var(--mantine-scale));
+  --day-size-sm: calc(2.25rem * var(--mantine-scale));
+  --day-size-md: calc(2.625rem * var(--mantine-scale));
+  --day-size-lg: calc(3rem * var(--mantine-scale));
+  --day-size-xl: calc(3.375rem * var(--mantine-scale));
+  --day-size: var(--day-size-sm);
+  width: var(--day-size, var(--day-size-sm));
+  height: var(--day-size, var(--day-size-sm));
+  font-size: calc(var(--day-size) / 2.8);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  user-select: none;
+  cursor: pointer;
+  background-color: transparent;
+  border-radius: var(--mantine-radius-default);
+  color: var(--mantine-color-text);
+  opacity: 1;
+}
+@media (hover: hover) {
+  [data-mantine-color-scheme=light] .m_396ce5cb:hover:where(:not([data-static], [data-disabled], [data-selected], [data-in-range])) {
+    background-color: var(--mantine-color-gray-0);
+  }
+  [data-mantine-color-scheme=dark] .m_396ce5cb:hover:where(:not([data-static], [data-disabled], [data-selected], [data-in-range])) {
+    background-color: var(--mantine-color-dark-5);
+  }
+}
+@media (hover: none) {
+  [data-mantine-color-scheme=light] .m_396ce5cb:active:where(:not([data-static], [data-disabled], [data-selected], [data-in-range])) {
+    background-color: var(--mantine-color-gray-0);
+  }
+  [data-mantine-color-scheme=dark] .m_396ce5cb:active:where(:not([data-static], [data-disabled], [data-selected], [data-in-range])) {
+    background-color: var(--mantine-color-dark-5);
+  }
+}
+.m_396ce5cb:where([data-static]) {
+  user-select: auto;
+  cursor: default;
+}
+.m_396ce5cb:where([data-weekend]) {
+  color: var(--mantine-color-red-6);
+}
+.m_396ce5cb:where([data-outside]) {
+  color: var(--mantine-color-dimmed);
+  opacity: 0.5;
+}
+.m_396ce5cb:where(:disabled, [data-disabled]) {
+  color: var(--mantine-color-disabled-color);
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.m_396ce5cb:where([data-hidden]) {
+  display: none;
+}
+:where([data-mantine-color-scheme=light]) .m_396ce5cb:where([data-today][data-highlight-today]:not([data-selected], [data-in-range])) {
+  border: 1px solid var(--mantine-color-gray-4);
+}
+:where([data-mantine-color-scheme=dark]) .m_396ce5cb:where([data-today][data-highlight-today]:not([data-selected], [data-in-range])) {
+  border: 1px solid var(--mantine-color-dark-4);
+}
+.m_396ce5cb:where([data-in-range]) {
+  background-color: var(--mantine-primary-color-light);
+  border-radius: 0;
+}
+@media (hover: hover) {
+  .m_396ce5cb:where([data-in-range]):hover:where(:not([data-disabled], [data-static])) {
+    background-color: var(--mantine-primary-color-light);
+  }
+}
+@media (hover: none) {
+  .m_396ce5cb:where([data-in-range]):active:where(:not([data-disabled], [data-static])) {
+    background-color: var(--mantine-primary-color-light);
+  }
+}
+.m_396ce5cb:where([data-first-in-range]) {
+  border-radius: 0;
+  border-start-start-radius: var(--mantine-radius-default);
+  border-end-start-radius: var(--mantine-radius-default);
+}
+.m_396ce5cb:where([data-last-in-range]) {
+  border-radius: 0;
+  border-end-end-radius: var(--mantine-radius-default);
+  border-start-end-radius: var(--mantine-radius-default);
+}
+.m_396ce5cb:where([data-last-in-range][data-first-in-range]) {
+  border-radius: var(--mantine-radius-default);
+}
+.m_396ce5cb:where([data-full-width]) {
+  width: 100%;
+  height: auto;
+  min-height: var(--day-size);
+  aspect-ratio: 1;
+}
+.m_396ce5cb:where([data-selected]) {
+  background-color: var(--mantine-primary-color-filled);
+  color: var(--mantine-primary-color-contrast);
+}
+@media (hover: hover) {
+  .m_396ce5cb:where([data-selected]):hover:where(:not([data-disabled], [data-static])) {
+    background-color: var(--mantine-primary-color-filled-hover);
+  }
+}
+@media (hover: none) {
+  .m_396ce5cb:where([data-selected]):active:where(:not([data-disabled], [data-static])) {
+    background-color: var(--mantine-primary-color-filled-hover);
+  }
+}
+.m_18a3eca {
+  color: var(--mantine-color-dimmed);
+  font-weight: var(--mantine-font-weight-regular);
+  font-size: var(--wr-fz, var(--mantine-font-size-sm));
+  text-transform: capitalize;
+  padding-bottom: calc(var(--wr-spacing, var(--mantine-spacing-sm)) / 2);
+}
+.m_cc9820d3 {
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+.m_cc9820d3[data-full-width] {
+  width: 100%;
+}
+.m_8f457cd5 {
+  padding: 0;
+}
+.m_8f457cd5:where([data-with-spacing]) {
+  padding: calc(0.03125rem * var(--mantine-scale));
+}
+.m_6cff9dea {
+  --wn-size-xs: calc(1.875rem * var(--mantine-scale));
+  --wn-size-sm: calc(2.25rem * var(--mantine-scale));
+  --wn-size-md: calc(2.625rem * var(--mantine-scale));
+  --wn-size-lg: calc(3rem * var(--mantine-scale));
+  --wn-size-xl: calc(3.375rem * var(--mantine-scale));
+  color: var(--mantine-color-dimmed);
+  font-weight: var(--mantine-font-weight-regular);
+  font-size: calc(var(--wn-size, var(--wn-size-sm)) / 2.8);
+  text-align: center;
+  width: var(--wn-size, var(--wn-size-sm));
+}
+.m_dc6a3c71 {
+  --dpc-size-xs: calc(1.875rem * var(--mantine-scale));
+  --dpc-size-sm: calc(2.25rem * var(--mantine-scale));
+  --dpc-size-md: calc(2.625rem * var(--mantine-scale));
+  --dpc-size-lg: calc(3rem * var(--mantine-scale));
+  --dpc-size-xl: calc(3.375rem * var(--mantine-scale));
+  --dpc-size: var(--dpc-size-sm);
+  font-size: var(--dpc-fz, var(--mantine-font-size-sm));
+  height: var(--dpc-size);
+  width: calc((var(--dpc-size) * 7) / 3 + calc(0.09375rem * var(--mantine-scale)));
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  user-select: none;
+  cursor: pointer;
+  background-color: transparent;
+  color: var(--mantine-color-text);
+  opacity: 1;
+  border-radius: var(--mantine-radius-default);
+}
+@media (hover: hover) {
+  :where([data-mantine-color-scheme=light]) .m_dc6a3c71:hover:where(:not([data-disabled], :disabled)) {
+    background-color: var(--mantine-color-gray-0);
+  }
+  :where([data-mantine-color-scheme=dark]) .m_dc6a3c71:hover:where(:not([data-disabled], :disabled)) {
+    background-color: var(--mantine-color-dark-5);
+  }
+}
+@media (hover: none) {
+  :where([data-mantine-color-scheme=light]) .m_dc6a3c71:active:where(:not([data-disabled], :disabled)) {
+    background-color: var(--mantine-color-gray-0);
+  }
+  :where([data-mantine-color-scheme=dark]) .m_dc6a3c71:active:where(:not([data-disabled], :disabled)) {
+    background-color: var(--mantine-color-dark-5);
+  }
+}
+.m_dc6a3c71:where(:disabled, [data-disabled]) {
+  color: var(--mantine-color-disabled-color);
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.m_dc6a3c71:where([data-selected]) {
+  background-color: var(--mantine-primary-color-filled);
+  color: var(--mantine-primary-color-contrast, var(--mantine-color-white));
+}
+@media (hover: hover) {
+  .m_dc6a3c71:where([data-selected]):hover {
+    background-color: var(--mantine-primary-color-filled-hover);
+  }
+}
+@media (hover: none) {
+  .m_dc6a3c71:where([data-selected]):active {
+    background-color: var(--mantine-primary-color-filled-hover);
+  }
+}
+.m_dc6a3c71:where([data-in-range]) {
+  background-color: var(--mantine-primary-color-light-hover);
+  border-radius: 0;
+}
+@media (hover: hover) {
+  .m_dc6a3c71:where([data-in-range]):hover {
+    background-color: var(--mantine-primary-color-light);
+  }
+}
+@media (hover: none) {
+  .m_dc6a3c71:where([data-in-range]):active {
+    background-color: var(--mantine-primary-color-light);
+  }
+}
+.m_dc6a3c71:where([data-first-in-range]) {
+  border-radius: 0;
+  border-start-start-radius: var(--mantine-radius-default);
+  border-end-start-radius: var(--mantine-radius-default);
+}
+.m_dc6a3c71:where([data-last-in-range]) {
+  border-radius: 0;
+  border-end-end-radius: var(--mantine-radius-default);
+  border-start-end-radius: var(--mantine-radius-default);
+}
+.m_dc6a3c71:where([data-first-in-range][data-last-in-range]) {
+  border-radius: var(--mantine-radius-default);
+}
+.m_dc6a3c71:where([data-full-width]) {
+  width: 100%;
+}
+.m_9206547b {
+  border-collapse: collapse;
+  border-width: 0;
+}
+.m_9206547b[data-full-width] {
+  width: 100%;
+}
+.m_c5a19c7d {
+  padding: 0;
+}
+.m_c5a19c7d:where([data-with-spacing]) {
+  padding: calc(0.03125rem * var(--mantine-scale));
+}
+.m_2a6c32d {
+  border-collapse: collapse;
+  border-width: 0;
+  cursor: pointer;
+}
+.m_2a6c32d[data-full-width] {
+  width: 100%;
+}
+.m_fe27622f {
+  padding: 0;
+}
+.m_fe27622f:where([data-with-spacing]) {
+  padding: calc(0.03125rem * var(--mantine-scale));
+}
+.m_730a79ed {
+  --dch-control-size-xs: calc(1.875rem * var(--mantine-scale));
+  --dch-control-size-sm: calc(2.25rem * var(--mantine-scale));
+  --dch-control-size-md: calc(2.625rem * var(--mantine-scale));
+  --dch-control-size-lg: calc(3rem * var(--mantine-scale));
+  --dch-control-size-xl: calc(3.375rem * var(--mantine-scale));
+  --dch-control-size: var(--dch-control-size-sm);
+  display: flex;
+  max-width: calc(var(--dch-control-size) * 8 + calc(0.4375rem * var(--mantine-scale)));
+  margin-bottom: var(--mantine-spacing-xs);
+}
+.m_730a79ed[data-full-width] {
+  max-width: none;
+  width: 100%;
+}
+.m_f6645d97,
+.m_2351eeb0 {
+  height: var(--dch-control-size);
+  border-radius: var(--mantine-radius-default);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  user-select: none;
+  opacity: 1;
+  cursor: pointer;
+}
+.m_f6645d97:where([data-static]),
+.m_2351eeb0:where([data-static]) {
+  cursor: default;
+}
+@media (hover: hover) {
+  [data-mantine-color-scheme=light] .m_f6645d97:hover:where(:not([data-disabled], [data-static], :disabled)),
+  [data-mantine-color-scheme=light] .m_2351eeb0:hover:where(:not([data-disabled], [data-static], :disabled)) {
+    background-color: var(--mantine-color-gray-0);
+  }
+  [data-mantine-color-scheme=dark] .m_f6645d97:hover:where(:not([data-disabled], [data-static], :disabled)),
+  [data-mantine-color-scheme=dark] .m_2351eeb0:hover:where(:not([data-disabled], [data-static], :disabled)) {
+    background-color: var(--mantine-color-dark-5);
+  }
+}
+@media (hover: none) {
+  [data-mantine-color-scheme=light] .m_f6645d97:active:where(:not([data-disabled], [data-static], :disabled)),
+  [data-mantine-color-scheme=light] .m_2351eeb0:active:where(:not([data-disabled], [data-static], :disabled)) {
+    background-color: var(--mantine-color-gray-0);
+  }
+  [data-mantine-color-scheme=dark] .m_f6645d97:active:where(:not([data-disabled], [data-static], :disabled)),
+  [data-mantine-color-scheme=dark] .m_2351eeb0:active:where(:not([data-disabled], [data-static], :disabled)) {
+    background-color: var(--mantine-color-dark-5);
+  }
+}
+.m_f6645d97:where(:disabled, [data-disabled]),
+.m_2351eeb0:where(:disabled, [data-disabled]) {
+  opacity: 0.2;
+  cursor: not-allowed;
+}
+.m_2351eeb0 {
+  width: var(--dch-control-size);
+}
+.m_f6645d97 {
+  flex: 1;
+  font-size: var(--dch-fz, var(--mantine-font-size-sm));
+  font-weight: var(--mantine-font-weight-medium);
+  text-transform: capitalize;
+}
+.m_367dc749 {
+  width: 60%;
+  height: 60%;
+}
+.m_367dc749:where([data-direction=next]) {
+  transform: rotate(270deg);
+}
+:where([dir=rtl]) .m_367dc749:where([data-direction=next]) {
+  transform: rotate(90deg);
+}
+.m_367dc749:where([data-direction=previous]) {
+  transform: rotate(90deg);
+}
+:where([dir=rtl]) .m_367dc749:where([data-direction=previous]) {
+  transform: rotate(270deg);
+}
+.m_30b26e33 {
+  display: flex;
+  gap: var(--mantine-spacing-md);
+}
+.m_30b26e33[data-full-width] {
+  width: 100%;
+}
+.m_30b26e33[data-full-width] > * {
+  flex: 1;
+}
+.m_6fa5e2aa {
+  cursor: pointer;
+  line-height: unset;
+}
+.m_6fa5e2aa:where([data-read-only]) {
+  cursor: default;
+}
+.m_765a40cf {
+  display: flex;
+  font-size: var(--preset-font-size);
+}
+.m_d6a681e1 {
+  display: flex;
+  flex-direction: column;
+  border-inline-end: calc(0.0625rem * var(--mantine-scale)) solid;
+  padding-inline-end: 0.5em;
+  margin-inline-end: 0.5em;
+}
+:where([data-mantine-color-scheme=light]) .m_d6a681e1 {
+  border-color: var(--mantine-color-gray-2);
+}
+:where([data-mantine-color-scheme=dark]) .m_d6a681e1 {
+  border-color: var(--mantine-color-dark-5);
+}
+.m_acd30b22 {
+  padding: 0.52em 0.8em;
+  border-radius: var(--mantine-radius-default);
+  font-size: var(--preset-font-size);
+  white-space: nowrap;
+}
+@media (hover: hover) {
+  :where([data-mantine-color-scheme=light]) .m_acd30b22:hover {
+    background-color: var(--mantine-color-gray-0);
+  }
+  :where([data-mantine-color-scheme=dark]) .m_acd30b22:hover {
+    background-color: var(--mantine-color-dark-5);
+  }
+}
+@media (hover: none) {
+  :where([data-mantine-color-scheme=light]) .m_acd30b22:active {
+    background-color: var(--mantine-color-gray-0);
+  }
+  :where([data-mantine-color-scheme=dark]) .m_acd30b22:active {
+    background-color: var(--mantine-color-dark-5);
+  }
+}
+.m_208d2562 {
+  display: flex;
+  align-items: stretch;
+  margin-top: var(--mantine-spacing-md);
+}
+.m_62ee059 {
+  flex: 1;
+  margin-inline-end: var(--mantine-spacing-md);
+}
+.m_ac3f4d63 {
+  text-align: center;
+  padding-inline: 1em;
+  padding-block: 0.25em;
+  border: 1px solid var(--mantine-color-default-border);
+  background-color: var(--mantine-color-default);
+  color: var(--mantine-color-default-color);
+  border-radius: var(--time-grid-radius, var(--mantine-radius-default));
+  font-size: var(--time-grid-fz, var(--mantine-font-size-sm));
+}
+@media (hover: hover) {
+  .m_ac3f4d63:hover:where(:not([data-disabled])) {
+    background-color: var(--mantine-color-default-hover);
+  }
+}
+@media (hover: none) {
+  .m_ac3f4d63:active:where(:not([data-disabled])) {
+    background-color: var(--mantine-color-default-hover);
+  }
+}
+.m_ac3f4d63:where([data-active]) {
+  background-color: var(--mantine-primary-color-filled);
+  color: var(--mantine-color-white);
+  border-color: transparent;
+}
+@media (hover: hover) {
+  .m_ac3f4d63:where([data-active]):hover:where(:not([data-disabled])) {
+    background-color: var(--mantine-primary-color-filled-hover);
+  }
+}
+@media (hover: none) {
+  .m_ac3f4d63:where([data-active]):active:where(:not([data-disabled])) {
+    background-color: var(--mantine-primary-color-filled-hover);
+  }
+}
+.m_ac3f4d63:where(:disabled, [data-disabled]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.m_2a0c4eda {
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  font-size: var(--mini-calendar-font-size);
+}
+.m_2a05be4f {
+  display: flex;
+  font-size: inherit;
+}
+.m_99d16a4 {
+  display: flex;
+  min-width: 3em;
+  gap: 0.5em;
+  font-size: inherit;
+  flex-direction: column;
+  align-items: center;
+  line-height: 1;
+  padding: 0.75em;
+  border-radius: var(--mantine-radius-default);
+}
+.m_99d16a4:where([data-selected]) {
+  color: var(--mantine-primary-color-contrast);
+  background-color: var(--mantine-primary-color-filled);
+}
+@media (hover: hover) {
+  .m_99d16a4:where([data-selected]):hover:where(:not([data-disabled], [data-static])) {
+    background-color: var(--mantine-primary-color-filled-hover);
+  }
+}
+@media (hover: none) {
+  .m_99d16a4:where([data-selected]):active:where(:not([data-disabled], [data-static])) {
+    background-color: var(--mantine-primary-color-filled-hover);
+  }
+}
+.m_99d16a4:where([data-disabled]) {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+@media (hover: hover) {
+  :where([data-mantine-color-scheme=light]) .m_99d16a4:hover:where(:not([data-disabled], [data-selected])) {
+    background-color: var(--mantine-color-gray-1);
+  }
+}
+@media (hover: none) {
+  :where([data-mantine-color-scheme=light]) .m_99d16a4:active:where(:not([data-disabled], [data-selected])) {
+    background-color: var(--mantine-color-gray-1);
+  }
+}
+@media (hover: hover) {
+  :where([data-mantine-color-scheme=dark]) .m_99d16a4:hover:where(:not([data-disabled], [data-selected])) {
+    background-color: var(--mantine-color-dark-5);
+  }
+}
+@media (hover: none) {
+  :where([data-mantine-color-scheme=dark]) .m_99d16a4:active:where(:not([data-disabled], [data-selected])) {
+    background-color: var(--mantine-color-dark-5);
+  }
+}
+.m_176ca23c {
+  font-size: 0.75em;
+  font-weight: var(--mantine-font-weight-medium);
+  opacity: 0.65;
+}
+.m_d830530d {
+  font-size: 0.9em;
+  font-weight: var(--mantine-font-weight-medium);
+}
+.m_14c23465 {
+  align-self: stretch;
+  font-size: inherit;
+  width: 2em;
+  border-radius: var(--mantine-radius-default);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--mantine-color-bright);
+}
+.m_14c23465:where([data-disabled]) {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+.m_14c23465 [data-chevron] {
+  font-size: inherit;
+  width: 60%;
+}
+.m_14c23465[data-direction=previous] [data-chevron] {
+  transform: rotate(90deg);
+}
+[dir=rtl] .m_14c23465[data-direction=previous] [data-chevron] {
+  transform: rotate(-90deg);
+}
+.m_14c23465[data-direction=next] [data-chevron] {
+  transform: rotate(-90deg);
+}
+[dir=rtl] .m_14c23465[data-direction=next] [data-chevron] {
+  transform: rotate(90deg);
+}
+@media (hover: hover) {
+  :where([data-mantine-color-scheme=light]) .m_14c23465:hover:where(:not([data-disabled])) {
+    background-color: var(--mantine-color-gray-1);
+  }
+}
+@media (hover: none) {
+  :where([data-mantine-color-scheme=light]) .m_14c23465:active:where(:not([data-disabled])) {
+    background-color: var(--mantine-color-gray-1);
+  }
+}
+@media (hover: hover) {
+  :where([data-mantine-color-scheme=dark]) .m_14c23465:hover:where(:not([data-disabled])) {
+    background-color: var(--mantine-color-dark-5);
+  }
+}
+@media (hover: none) {
+  :where([data-mantine-color-scheme=dark]) .m_14c23465:active:where(:not([data-disabled])) {
+    background-color: var(--mantine-color-dark-5);
+  }
+}
+
+/* src/components/Apps/CalendarApp/CalendarApp.module.css */
+.root {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 12px;
+  height: 100%;
+}
+
+/* src/components/Shared/IconColorPicker/IconColorPicker.module.css */
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.iconGrid {
+  padding: 4px;
+}
+.iconButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 6px;
+  border: 2px solid transparent;
+  transition: background 0.1s, border-color 0.1s;
+  cursor: pointer;
+}
+.iconButton:hover {
+  background: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.08));
+}
+.iconButton[data-selected] {
+  border-color: var(--mantine-primary-color-filled);
+  background: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.12));
+}
+
+/* src/components/Shared/CreateItemApp/CreateItemApp.module.css */
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+}
+.header {
+  padding: 12px 16px;
+  border-bottom: 1px solid light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08));
+}
+.nameRow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.iconPreview {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 8px;
+  background: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.06));
+}
+.nameInput {
+  flex: 1;
+}
+.collapseToggle {
+  display: flex;
+  align-items: center;
+  padding: 4px 0;
+  cursor: pointer;
+  user-select: none;
+}
+.collapseToggle:hover {
+  opacity: 0.8;
+}
+.pickerWrapper {
+  padding: 8px;
+  border-radius: 8px;
+  background: light-dark(rgba(0, 0, 0, 0.03), rgba(255, 255, 255, 0.04));
+  border: 1px solid light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08));
+}
+
+/* src/components/AppMenuBar/AppMenuBar.module.css */
+.root {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+  padding: 0 6px;
+  height: 50px;
+  flex-shrink: 0;
+  background: var(--color-surface-subtle);
+  border-bottom: 1px solid var(--color-surface-border);
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.root::-webkit-scrollbar {
+  display: none;
+}
+.menuTrigger {
+  all: unset;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  border-radius: var(--radius-sm);
+  font-size: var(--mantine-font-size-sm);
+  cursor: pointer;
+  white-space: nowrap;
+  line-height: 1;
+  min-height: 36px;
+}
+.menuTrigger:hover {
+  background: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
+}
+.element {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 4px;
+}
+.sliderLabel {
+  font-size: var(--mantine-font-size-sm);
+  color: var(--mantine-color-dimmed);
+  white-space: nowrap;
+}
+.select,
+.textInput,
+.numberInput {
+  min-width: 100px;
+  max-width: 200px;
+}
+.numberInput {
+  width: 120px;
+}
+.slider {
+  width: 300px;
+}
+
+/* src/components/Apps/TerminalApp/Terminal.module.css */
+.terminalContainer {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #1e1e1e;
+}
+.terminalWrapper {
+  flex: 1;
+  min-height: 0;
+  padding: 8px;
+}
+.terminal {
+  width: 100%;
+  height: 100%;
+}
+.terminal :global(.xterm) {
+  height: 100%;
+  padding: 4px;
+}
+.terminal :global(.xterm-viewport) {
+  overflow-y: auto;
+}
+.terminal :global(.xterm-screen) {
+  background-color: #1e1e1e;
+}
+.statusBar {
+  height: 24px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 8px;
+  background-color: #2d2d2d;
+  border-top: 1px solid #3d3d3d;
+  font-size: 12px;
+  color: #888;
+}
+.statusIndicator {
+  display: flex;
+  align-items: center;
+}
+.statusIndicator[data-status=idle] {
+  color: #888;
+}
+.statusIndicator[data-status=connecting] {
+  color: #f5a623;
+}
+.statusIndicator[data-status=connected] {
+  color: #4caf50;
+}
+.statusIndicator[data-status=disconnected] {
+  color: #888;
+}
+.statusIndicator[data-status=error] {
+  color: #f44336;
+}
+.statusText {
+  font-size: 11px;
+}
+.reconnectButton {
+  margin-left: auto;
+  padding: 2px 8px;
+  font-size: 11px;
+  background-color: #0078d4;
+  color: white;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+.reconnectButton:hover {
+  background-color: #106ebe;
+}
+.reconnectButton:active {
+  background-color: #005a9e;
+}
+
+/* src/components/Apps/CodeServerApp/CodeServerApp.module.css */
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #1e1e1e;
+}
+.loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #d4d4d4;
+  gap: 16px;
+}
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid #333;
+  border-top-color: #0078d4;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.loading p {
+  margin: 0;
+  font-size: 14px;
+}
+.error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #d4d4d4;
+  gap: 12px;
+  padding: 24px;
+  text-align: center;
+}
+.error h3 {
+  margin: 0;
+  color: #f44336;
+  font-size: 18px;
+}
+.error p {
+  margin: 0;
+  font-size: 14px;
+  color: #888;
+}
+.retryButton {
+  margin-top: 12px;
+  padding: 8px 16px;
+  background-color: #0078d4;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.2s;
+}
+.retryButton:hover {
+  background-color: #106ebe;
+}
+.iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: #1e1e1e;
+}
+
+/* src/components/Apps/StorybookApp/StorybookApp.module.css */
+.frame {
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+}
+
+/* src/components/Apps/FilesApp/components/FolderTree.module.css */
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+.item {
+  display: flex;
+  align-items: center;
+  padding: 5px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  user-select: none;
+  width: 100%;
+  transition: background 0.1s;
+}
+.item:hover {
+  background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.07));
+}
+.item[data-active] {
+  background: var(--mantine-primary-color-light);
+  color: var(--mantine-primary-color-filled);
+}
+
+/* src/components/Apps/FilesApp/components/FileList.module.css */
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  gap: 4px;
+  padding: 8px;
+}
+.item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 6px;
+  border-radius: 6px;
+  width: 80px;
+  cursor: default;
+  user-select: none;
+  transition: background 0.1s;
+}
+.item:hover {
+  background: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.08));
+}
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+}
+.name {
+  text-align: center;
+  width: 100%;
+  max-width: 72px;
+  word-break: break-word;
+  display: -webkit-box;
+  line-clamp: 2;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 24px;
+}
+
+/* src/components/Apps/FilesApp/FilesApp.module.css */
+.root {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+.breadcrumbBar {
+  flex-shrink: 0;
+  padding: 6px 10px;
+  border-bottom: 1px solid light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08));
+  background: light-dark(rgba(0, 0, 0, 0.02), rgba(255, 255, 255, 0.02));
+}
+.breadcrumbSep {
+  font-size: 12px;
+  color: var(--mantine-color-dimmed);
+}
+.body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+.sidebar {
+  width: 160px;
+  flex-shrink: 0;
+  border-right: 1px solid light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08));
+  overflow-y: auto;
+}
+.content {
+  flex: 1;
+  overflow-y: auto;
+  min-width: 0;
+}