anentrypoint-design 0.0.29 → 0.0.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +42 -1
- package/dist/247420.app.js +2 -16
- package/dist/247420.css +236 -0
- package/dist/247420.js +6 -20
- package/package.json +1 -1
- package/src/components/files-modals.js +105 -0
- package/src/components/files.js +126 -0
- package/src/components.js +11 -0
- package/src/highlight.js +4 -46
- package/src/motion.js +6 -106
package/dist/247420.css
CHANGED
|
@@ -1968,3 +1968,239 @@
|
|
|
1968
1968
|
font-size: 12.5px;
|
|
1969
1969
|
}
|
|
1970
1970
|
.ds-247420 .chat-md pre code { background: transparent; padding: 0; }
|
|
1971
|
+
|
|
1972
|
+
|
|
1973
|
+
/* ============================================================
|
|
1974
|
+
File browser surfaces — FileRow, FileGrid, DropZone, FileViewer,
|
|
1975
|
+
modals. Rail color is keyed by [data-file-type] so consumers
|
|
1976
|
+
never apply .rail-* manually. The seven canonical types:
|
|
1977
|
+
dir image video audio code text archive document (+symlink, other).
|
|
1978
|
+
============================================================ */
|
|
1979
|
+
|
|
1980
|
+
.ds-247420 .ds-file-toolbar {
|
|
1981
|
+
display: flex;
|
|
1982
|
+
align-items: center;
|
|
1983
|
+
justify-content: space-between;
|
|
1984
|
+
gap: var(--space-3);
|
|
1985
|
+
padding: var(--space-3) var(--space-4);
|
|
1986
|
+
background: var(--panel-1);
|
|
1987
|
+
border-radius: var(--r-3);
|
|
1988
|
+
margin-bottom: var(--space-3);
|
|
1989
|
+
}
|
|
1990
|
+
.ds-247420 .ds-file-toolbar-left, .ds-247420 .ds-file-toolbar-right {
|
|
1991
|
+
display: flex; align-items: center; gap: var(--space-2);
|
|
1992
|
+
}
|
|
1993
|
+
|
|
1994
|
+
.ds-247420 .ds-file-grid {
|
|
1995
|
+
display: flex;
|
|
1996
|
+
flex-direction: column;
|
|
1997
|
+
gap: var(--space-2);
|
|
1998
|
+
}
|
|
1999
|
+
|
|
2000
|
+
.ds-247420 .ds-file-row {
|
|
2001
|
+
display: grid;
|
|
2002
|
+
grid-template-columns: auto 28px 1fr auto auto;
|
|
2003
|
+
gap: var(--space-3);
|
|
2004
|
+
align-items: center;
|
|
2005
|
+
padding: var(--space-3) var(--space-4);
|
|
2006
|
+
background: var(--panel-1);
|
|
2007
|
+
border-radius: var(--r-3);
|
|
2008
|
+
cursor: pointer;
|
|
2009
|
+
transition: background var(--dur-snap) var(--ease);
|
|
2010
|
+
}
|
|
2011
|
+
.ds-247420 .ds-file-row:hover { background: var(--panel-hover); }
|
|
2012
|
+
.ds-247420 .ds-file-row.active { background: var(--panel-select); }
|
|
2013
|
+
.ds-247420 .ds-file-row > .code { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--panel-text-3); }
|
|
2014
|
+
.ds-247420 .ds-file-row > .title { font-weight: 500; color: var(--panel-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
2015
|
+
.ds-247420 .ds-file-row > .meta { font-size: var(--fs-xs); color: var(--panel-text-3); white-space: nowrap; }
|
|
2016
|
+
|
|
2017
|
+
.ds-247420 .ds-file-icon {
|
|
2018
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
2019
|
+
width: 28px; height: 28px;
|
|
2020
|
+
font-family: var(--ff-mono);
|
|
2021
|
+
font-size: 16px;
|
|
2022
|
+
color: var(--panel-text-2);
|
|
2023
|
+
}
|
|
2024
|
+
|
|
2025
|
+
/* File-type rail mapping — owned by [data-file-type] attribute */
|
|
2026
|
+
.ds-247420 .ds-file-row[data-file-type="image"] { box-shadow: inset 4px 0 0 var(--sky); }
|
|
2027
|
+
.ds-247420 .ds-file-row[data-file-type="video"] { box-shadow: inset 4px 0 0 var(--purple); }
|
|
2028
|
+
.ds-247420 .ds-file-row[data-file-type="audio"] { box-shadow: inset 4px 0 0 var(--mascot); }
|
|
2029
|
+
.ds-247420 .ds-file-row[data-file-type="code"] { box-shadow: inset 4px 0 0 var(--green); }
|
|
2030
|
+
.ds-247420 .ds-file-row[data-file-type="text"] { box-shadow: inset 4px 0 0 var(--mascot); }
|
|
2031
|
+
.ds-247420 .ds-file-row[data-file-type="archive"] { box-shadow: inset 4px 0 0 var(--flame); }
|
|
2032
|
+
.ds-247420 .ds-file-row[data-file-type="document"] { box-shadow: inset 4px 0 0 var(--sun); }
|
|
2033
|
+
.ds-247420 .ds-file-row[data-file-type="dir"] { box-shadow: inset 4px 0 0 var(--green); }
|
|
2034
|
+
.ds-247420 .ds-file-row[data-file-type="symlink"] { box-shadow: inset 4px 0 0 var(--sky); }
|
|
2035
|
+
.ds-247420 .ds-file-row[data-file-type="other"] { box-shadow: inset 4px 0 0 var(--panel-text-3); }
|
|
2036
|
+
|
|
2037
|
+
.ds-247420 .ds-file-icon[data-file-type="image"] { color: var(--sky); }
|
|
2038
|
+
.ds-247420 .ds-file-icon[data-file-type="video"] { color: var(--purple); }
|
|
2039
|
+
.ds-247420 .ds-file-icon[data-file-type="audio"] { color: var(--mascot); }
|
|
2040
|
+
.ds-247420 .ds-file-icon[data-file-type="code"] { color: var(--green); }
|
|
2041
|
+
.ds-247420 .ds-file-icon[data-file-type="text"] { color: var(--mascot); }
|
|
2042
|
+
.ds-247420 .ds-file-icon[data-file-type="archive"] { color: var(--flame); }
|
|
2043
|
+
.ds-247420 .ds-file-icon[data-file-type="document"] { color: var(--sun); }
|
|
2044
|
+
.ds-247420 .ds-file-icon[data-file-type="dir"] { color: var(--green); }
|
|
2045
|
+
.ds-247420 .ds-file-icon[data-file-type="symlink"] { color: var(--sky); }
|
|
2046
|
+
|
|
2047
|
+
.ds-247420 .ds-file-actions { display: inline-flex; gap: 4px; }
|
|
2048
|
+
.ds-247420 .ds-file-act {
|
|
2049
|
+
width: 28px; height: 28px;
|
|
2050
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
2051
|
+
background: transparent;
|
|
2052
|
+
color: var(--panel-text-2);
|
|
2053
|
+
border-radius: var(--r-1);
|
|
2054
|
+
cursor: pointer;
|
|
2055
|
+
font-size: 14px;
|
|
2056
|
+
transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
|
|
2057
|
+
}
|
|
2058
|
+
.ds-247420 .ds-file-act:hover { background: var(--panel-2); color: var(--panel-text); }
|
|
2059
|
+
.ds-247420 .ds-file-act-warn:hover { background: var(--warn); color: var(--paper); }
|
|
2060
|
+
|
|
2061
|
+
.ds-247420 .ds-file-empty {
|
|
2062
|
+
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
2063
|
+
padding: var(--space-7) var(--space-4);
|
|
2064
|
+
gap: var(--space-2);
|
|
2065
|
+
color: var(--panel-text-3);
|
|
2066
|
+
background: var(--panel-1);
|
|
2067
|
+
border-radius: var(--r-3);
|
|
2068
|
+
}
|
|
2069
|
+
.ds-247420 .ds-file-empty-glyph { font-family: var(--ff-mono); font-size: 32px; }
|
|
2070
|
+
.ds-247420 .ds-file-empty-text { font-size: var(--fs-sm); }
|
|
2071
|
+
|
|
2072
|
+
/* DropZone */
|
|
2073
|
+
.ds-247420 .ds-dropzone {
|
|
2074
|
+
display: block;
|
|
2075
|
+
padding: var(--space-4);
|
|
2076
|
+
border-radius: var(--r-3);
|
|
2077
|
+
background: var(--panel-1);
|
|
2078
|
+
transition: background var(--dur-snap) var(--ease), box-shadow var(--dur-snap) var(--ease);
|
|
2079
|
+
}
|
|
2080
|
+
.ds-247420 .ds-dropzone.dragover {
|
|
2081
|
+
background: var(--panel-select);
|
|
2082
|
+
box-shadow: inset 0 0 0 2px var(--green);
|
|
2083
|
+
}
|
|
2084
|
+
.ds-247420 .ds-dropzone-inner {
|
|
2085
|
+
display: flex; align-items: center; gap: var(--space-3);
|
|
2086
|
+
}
|
|
2087
|
+
.ds-247420 .ds-dropzone-glyph { font-family: var(--ff-mono); font-size: 20px; color: var(--green); }
|
|
2088
|
+
.ds-247420 .ds-dropzone-label { color: var(--panel-text-2); font-size: var(--fs-sm); flex: 1; }
|
|
2089
|
+
|
|
2090
|
+
/* Upload progress */
|
|
2091
|
+
.ds-247420 .ds-upload-progress {
|
|
2092
|
+
display: flex; flex-direction: column; gap: var(--space-2);
|
|
2093
|
+
padding: var(--space-3) var(--space-4);
|
|
2094
|
+
background: var(--panel-1);
|
|
2095
|
+
border-radius: var(--r-3);
|
|
2096
|
+
margin-top: var(--space-3);
|
|
2097
|
+
}
|
|
2098
|
+
.ds-247420 .ds-upload-item { display: grid; grid-template-columns: 1fr 120px 40px; gap: var(--space-3); align-items: center; }
|
|
2099
|
+
.ds-247420 .ds-upload-name { font-size: var(--fs-xs); color: var(--panel-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
2100
|
+
.ds-247420 .ds-upload-bar { position: relative; height: 6px; background: var(--panel-2); border-radius: var(--r-pill); overflow: hidden; }
|
|
2101
|
+
.ds-247420 .ds-upload-fill {
|
|
2102
|
+
position: absolute; left: 0; top: 0; bottom: 0;
|
|
2103
|
+
background: var(--green);
|
|
2104
|
+
width: 0%;
|
|
2105
|
+
transition: width var(--dur-base) var(--ease);
|
|
2106
|
+
}
|
|
2107
|
+
/* Width set via attr — generated runtime via inline style is the only carve-out the kit allows. */
|
|
2108
|
+
.ds-247420 .ds-upload-fill[data-pct="0"] { width: 0%; }
|
|
2109
|
+
.ds-247420 .ds-upload-fill[data-pct="10"] { width: 10%; } .ds-247420 .ds-upload-fill[data-pct="20"] { width: 20%; }
|
|
2110
|
+
.ds-247420 .ds-upload-fill[data-pct="30"] { width: 30%; } .ds-247420 .ds-upload-fill[data-pct="40"] { width: 40%; }
|
|
2111
|
+
.ds-247420 .ds-upload-fill[data-pct="50"] { width: 50%; } .ds-247420 .ds-upload-fill[data-pct="60"] { width: 60%; }
|
|
2112
|
+
.ds-247420 .ds-upload-fill[data-pct="70"] { width: 70%; } .ds-247420 .ds-upload-fill[data-pct="80"] { width: 80%; }
|
|
2113
|
+
.ds-247420 .ds-upload-fill[data-pct="90"] { width: 90%; } .ds-247420 .ds-upload-fill[data-pct="100"] { width: 100%; }
|
|
2114
|
+
.ds-247420 .ds-upload-pct { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--panel-text-3); text-align: right; }
|
|
2115
|
+
.ds-247420 .ds-upload-item.done .ds-upload-fill { background: var(--live); }
|
|
2116
|
+
.ds-247420 .ds-upload-item.error .ds-upload-fill { background: var(--warn); }
|
|
2117
|
+
|
|
2118
|
+
/* BreadcrumbPath */
|
|
2119
|
+
.ds-247420 .ds-crumb-path { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: var(--fs-sm); }
|
|
2120
|
+
.ds-247420 .ds-crumb-seg {
|
|
2121
|
+
background: transparent; color: var(--panel-text-2);
|
|
2122
|
+
padding: var(--space-1) var(--space-2); border-radius: var(--r-1);
|
|
2123
|
+
cursor: pointer; font-family: var(--ff-ui); font-size: var(--fs-sm);
|
|
2124
|
+
transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
|
|
2125
|
+
}
|
|
2126
|
+
.ds-247420 .ds-crumb-seg:hover { background: var(--panel-2); color: var(--panel-text); }
|
|
2127
|
+
.ds-247420 .ds-crumb-seg.leaf { color: var(--panel-accent); font-weight: 600; }
|
|
2128
|
+
.ds-247420 .ds-crumb-sep { color: var(--panel-text-3); font-family: var(--ff-mono); }
|
|
2129
|
+
|
|
2130
|
+
/* Modal backdrop & shells */
|
|
2131
|
+
.ds-247420 .ds-modal-backdrop {
|
|
2132
|
+
position: fixed; inset: 0;
|
|
2133
|
+
background: color-mix(in oklab, var(--ink) 55%, transparent);
|
|
2134
|
+
display: flex; align-items: center; justify-content: center;
|
|
2135
|
+
padding: var(--space-4);
|
|
2136
|
+
z-index: 1000;
|
|
2137
|
+
}
|
|
2138
|
+
.ds-247420 .ds-modal {
|
|
2139
|
+
background: var(--panel-1);
|
|
2140
|
+
color: var(--panel-text);
|
|
2141
|
+
border-radius: var(--r-3);
|
|
2142
|
+
padding: 0;
|
|
2143
|
+
max-width: min(92vw, 560px);
|
|
2144
|
+
max-height: 92vh;
|
|
2145
|
+
overflow: hidden;
|
|
2146
|
+
display: flex; flex-direction: column;
|
|
2147
|
+
}
|
|
2148
|
+
.ds-247420 .ds-modal-small { max-width: min(92vw, 420px); }
|
|
2149
|
+
.ds-247420 .ds-modal-preview { max-width: min(96vw, 1080px); width: 100%; }
|
|
2150
|
+
.ds-247420 .ds-modal-head {
|
|
2151
|
+
padding: var(--space-3) var(--space-4);
|
|
2152
|
+
background: var(--panel-2);
|
|
2153
|
+
font-weight: 600;
|
|
2154
|
+
display: flex; align-items: center; gap: var(--space-3);
|
|
2155
|
+
}
|
|
2156
|
+
.ds-247420 .ds-modal-body {
|
|
2157
|
+
padding: var(--space-4);
|
|
2158
|
+
overflow: auto;
|
|
2159
|
+
}
|
|
2160
|
+
.ds-247420 .ds-modal-actions {
|
|
2161
|
+
padding: var(--space-3) var(--space-4);
|
|
2162
|
+
background: var(--panel-2);
|
|
2163
|
+
display: flex; gap: var(--space-2); justify-content: flex-end;
|
|
2164
|
+
}
|
|
2165
|
+
.ds-247420 .ds-modal-input { width: 100%; }
|
|
2166
|
+
|
|
2167
|
+
/* FileViewer */
|
|
2168
|
+
.ds-247420 .ds-preview-head { box-shadow: inset 4px 0 0 var(--panel-text-3); }
|
|
2169
|
+
.ds-247420 .ds-preview-head[data-file-type="image"] { box-shadow: inset 4px 0 0 var(--sky); }
|
|
2170
|
+
.ds-247420 .ds-preview-head[data-file-type="video"] { box-shadow: inset 4px 0 0 var(--purple); }
|
|
2171
|
+
.ds-247420 .ds-preview-head[data-file-type="audio"] { box-shadow: inset 4px 0 0 var(--mascot); }
|
|
2172
|
+
.ds-247420 .ds-preview-head[data-file-type="code"] { box-shadow: inset 4px 0 0 var(--green); }
|
|
2173
|
+
.ds-247420 .ds-preview-head[data-file-type="text"] { box-shadow: inset 4px 0 0 var(--mascot); }
|
|
2174
|
+
.ds-247420 .ds-preview-head[data-file-type="archive"] { box-shadow: inset 4px 0 0 var(--flame); }
|
|
2175
|
+
.ds-247420 .ds-preview-head[data-file-type="document"] { box-shadow: inset 4px 0 0 var(--sun); }
|
|
2176
|
+
.ds-247420 .ds-preview-name { flex: 1; font-family: var(--ff-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
2177
|
+
.ds-247420 .ds-preview-meta { color: var(--panel-text-3); font-size: var(--fs-xs); font-family: var(--ff-mono); }
|
|
2178
|
+
.ds-247420 .ds-preview-actions { display: inline-flex; gap: 4px; }
|
|
2179
|
+
.ds-247420 .ds-preview-body {
|
|
2180
|
+
flex: 1; overflow: auto;
|
|
2181
|
+
background: var(--panel-0);
|
|
2182
|
+
padding: var(--space-3);
|
|
2183
|
+
min-height: 200px;
|
|
2184
|
+
display: flex; align-items: center; justify-content: center;
|
|
2185
|
+
}
|
|
2186
|
+
.ds-247420 .ds-preview-body[data-file-type="code"], .ds-247420 .ds-preview-body[data-file-type="text"] {
|
|
2187
|
+
align-items: stretch; justify-content: stretch; padding: 0;
|
|
2188
|
+
}
|
|
2189
|
+
.ds-247420 .ds-preview-media { max-width: 100%; max-height: 70vh; display: block; }
|
|
2190
|
+
.ds-247420 .ds-preview-audio { width: 100%; }
|
|
2191
|
+
.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); }
|
|
2192
|
+
.ds-247420 .ds-preview-glyph { font-family: var(--ff-mono); font-size: 48px; color: var(--panel-text-3); }
|
|
2193
|
+
.ds-247420 .ds-preview-code, .ds-247420 .ds-preview-text {
|
|
2194
|
+
margin: 0;
|
|
2195
|
+
padding: var(--space-4);
|
|
2196
|
+
background: var(--panel-2);
|
|
2197
|
+
color: var(--panel-text);
|
|
2198
|
+
font-family: var(--ff-mono);
|
|
2199
|
+
font-size: 12.5px;
|
|
2200
|
+
line-height: 1.55;
|
|
2201
|
+
overflow: auto;
|
|
2202
|
+
width: 100%;
|
|
2203
|
+
max-height: 70vh;
|
|
2204
|
+
}
|
|
2205
|
+
.ds-247420 .ds-preview-code code, .ds-247420 .ds-preview-text code { background: transparent; padding: 0; font-size: inherit; }
|
|
2206
|
+
.ds-247420 .ds-preview-truncated { color: var(--panel-text-3); font-style: italic; padding: var(--space-2) 0 0 0; }
|