jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(rcal): add swipe/pan navigation and pinch-to-zoom gestures 

Add pointer-based gesture handling to the calendar for lateral navigation
(drag/swipe left/right) and pinch-to-zoom between temporal layers. Also
fix dark mode across 30+ canvas shape components by replacing hardcoded
white backgrounds and input styles with --rs-* CSS custom property
references (with light-mode fallbacks).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-09 15:12:47 -07:00
parent fe031094a4
commit a689445af5
39 changed files with 276 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
lib/folk-blender.ts
View File

@ -3,7 +3,8 @@ import { css, html } from "./tags";
const styles = css`
:host {
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, #1e293b);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-width: 380px;
@ -63,12 +64,14 @@ const styles = css`
.prompt-input {
width: 100%;
padding: 10px 12px;
border: 2px solid #e2e8f0;
border: 2px solid var(--rs-input-border, #e2e8f0);
border-radius: 8px;
font-size: 13px;
resize: none;
outline: none;
font-family: inherit;
background: var(--rs-input-bg, #fff);
color: var(--rs-input-text, inherit);
}
.prompt-input:focus {

3
lib/folk-booking.ts
View File

@ -3,7 +3,8 @@ import { css, html } from "./tags";
const styles = css`
:host {
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, #1e293b);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-width: 280px;

7
lib/folk-budget.ts
View File

@ -3,7 +3,8 @@ import { css, html } from "./tags";
const styles = css`
:host {
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, #1e293b);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-width: 280px;
@ -147,10 +148,12 @@ const styles = css`
.add-form input {
flex: 1;
padding: 6px 8px;
border: 1px solid #e2e8f0;
border: 1px solid var(--rs-input-border, #e2e8f0);
border-radius: 4px;
font-size: 12px;
outline: none;
background: var(--rs-input-bg, #fff);
color: var(--rs-input-text, inherit);
}
.add-form input:focus {

3
lib/folk-calendar.ts
View File

@ -3,7 +3,8 @@ import { css, html } from "./tags";
const styles = css`
:host {
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, #1e293b);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-width: 280px;

14
lib/folk-chat.ts
View File

@ -4,7 +4,8 @@ import { SpeechDictation } from "./speech-dictation";
const styles = css`
:host {
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, #1e293b);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-width: 300px;
@ -65,7 +66,8 @@ const styles = css`
}
.message {
background: #f1f5f9;
background: var(--rs-bg-surface-sunken, #f1f5f9);
color: var(--rs-text-primary, #1e293b);
border-radius: 8px;
padding: 8px 12px;
max-width: 85%;
@ -94,16 +96,18 @@ const styles = css`
display: flex;
gap: 8px;
padding: 12px;
border-top: 1px solid #e2e8f0;
border-top: 1px solid var(--rs-border, #e2e8f0);
}
.message-input {
flex: 1;
border: 1px solid #e2e8f0;
border: 1px solid var(--rs-input-border, #e2e8f0);
border-radius: 6px;
padding: 8px 12px;
font-size: 14px;
outline: none;
background: var(--rs-input-bg, #fff);
color: var(--rs-input-text, inherit);
}
.message-input:focus {
@ -126,7 +130,7 @@ const styles = css`
.mic-btn {
background: transparent;
border: 1px solid #e2e8f0;
border: 1px solid var(--rs-border, #e2e8f0);
border-radius: 6px;
padding: 8px 10px;
cursor: pointer;

15
lib/folk-choice-conviction.ts
View File

@ -6,7 +6,8 @@ const USER_NAME_KEY = "folk-choice-username";
const styles = css`
:host {
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, #1e293b);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-width: 340px;
@ -197,11 +198,13 @@ const styles = css`
.add-input {
flex: 1;
border: 1px solid #e2e8f0;
border: 1px solid var(--rs-input-border, #e2e8f0);
border-radius: 6px;
padding: 6px 10px;
font-size: 12px;
outline: none;
background: var(--rs-input-bg, #fff);
color: var(--rs-input-text, inherit);
}
.add-input:focus { border-color: #d97706; }
@ -231,11 +234,13 @@ const styles = css`
}
.username-input {
border: 1px solid #e2e8f0;
border: 1px solid var(--rs-input-border, #e2e8f0);
border-radius: 6px;
padding: 8px 12px;
font-size: 13px;
outline: none;
background: var(--rs-input-bg, #fff);
color: var(--rs-input-text, inherit);
width: 100%;
box-sizing: border-box;
margin-bottom: 8px;
@ -255,7 +260,7 @@ const styles = css`
.wrapper { position: relative; height: 100%; }
.results-drawer {
position: absolute; top: 0; left: 100%; width: 300px; height: 100%;
background: white; border-radius: 0 8px 8px 0;
background: var(--rs-bg-surface, #fff); border-radius: 0 8px 8px 0;
box-shadow: 4px 0 12px rgba(0,0,0,0.08);
overflow-y: auto; display: none; flex-direction: column;
font-size: 12px; z-index: 10;
@ -283,7 +288,7 @@ const styles = css`
.settings-open .body { display: none !important; }
.settings-open .results-drawer { display: none !important; }
.settings-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #94a3b8; margin-bottom: 6px; }
.settings-input { width: 100%; box-sizing: border-box; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px 10px; font-size: 12px; outline: none; }
.settings-input { width: 100%; box-sizing: border-box; border: 1px solid var(--rs-input-border, #e2e8f0); border-radius: 6px; padding: 6px 10px; font-size: 12px; outline: none; background: var(--rs-input-bg, #fff); color: var(--rs-input-text, inherit); }
.settings-input:focus { border-color: #d97706; }
.settings-item { display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.settings-item input[type="text"] { flex: 1; border: 1px solid #e2e8f0; border-radius: 4px; padding: 4px 6px; font-size: 11px; outline: none; min-width: 0; }

15
lib/folk-choice-rank.ts
View File

@ -6,7 +6,8 @@ const USER_NAME_KEY = "folk-choice-username";
const styles = css`
:host {
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, #1e293b);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-width: 340px;
@ -228,11 +229,13 @@ const styles = css`
.add-input {
flex: 1;
border: 1px solid #e2e8f0;
border: 1px solid var(--rs-input-border, #e2e8f0);
border-radius: 6px;
padding: 6px 10px;
font-size: 12px;
outline: none;
background: var(--rs-input-bg, #fff);
color: var(--rs-input-text, inherit);
}
.add-input:focus { border-color: #4f46e5; }
@ -262,11 +265,13 @@ const styles = css`
}
.username-input {
border: 1px solid #e2e8f0;
border: 1px solid var(--rs-input-border, #e2e8f0);
border-radius: 6px;
padding: 8px 12px;
font-size: 13px;
outline: none;
background: var(--rs-input-bg, #fff);
color: var(--rs-input-text, inherit);
width: 100%;
box-sizing: border-box;
margin-bottom: 8px;
@ -293,7 +298,7 @@ const styles = css`
.wrapper { position: relative; height: 100%; }
.results-drawer {
position: absolute; top: 0; left: 100%; width: 300px; height: 100%;
background: white; border-radius: 0 8px 8px 0;
background: var(--rs-bg-surface, #fff); border-radius: 0 8px 8px 0;
box-shadow: 4px 0 12px rgba(0,0,0,0.08);
overflow-y: auto; display: none; flex-direction: column;
font-size: 12px; z-index: 10;
@ -321,7 +326,7 @@ const styles = css`
.settings-open .body { display: none !important; }
.settings-open .results-drawer { display: none !important; }
.settings-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #94a3b8; margin-bottom: 6px; }
.settings-input { width: 100%; box-sizing: border-box; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px 10px; font-size: 12px; outline: none; }
.settings-input { width: 100%; box-sizing: border-box; border: 1px solid var(--rs-input-border, #e2e8f0); border-radius: 6px; padding: 6px 10px; font-size: 12px; outline: none; background: var(--rs-input-bg, #fff); color: var(--rs-input-text, inherit); }
.settings-input:focus { border-color: #4f46e5; }
.settings-item { display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.settings-item input[type="text"] { flex: 1; border: 1px solid #e2e8f0; border-radius: 4px; padding: 4px 6px; font-size: 11px; outline: none; min-width: 0; }

11
lib/folk-choice-spider.ts
View File

@ -6,7 +6,8 @@ const USER_NAME_KEY = "folk-choice-username";
const styles = css`
:host {
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, #1e293b);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-width: 400px;
@ -231,11 +232,13 @@ const styles = css`
}
.username-input {
border: 1px solid #e2e8f0;
border: 1px solid var(--rs-input-border, #e2e8f0);
border-radius: 6px;
padding: 8px 12px;
font-size: 13px;
outline: none;
background: var(--rs-input-bg, #fff);
color: var(--rs-input-text, inherit);
width: 100%;
box-sizing: border-box;
margin-bottom: 8px;
@ -262,7 +265,7 @@ const styles = css`
.wrapper { position: relative; height: 100%; }
.results-drawer {
position: absolute; top: 0; left: 100%; width: 300px; height: 100%;
background: white; border-radius: 0 8px 8px 0;
background: var(--rs-bg-surface, #fff); border-radius: 0 8px 8px 0;
box-shadow: 4px 0 12px rgba(0,0,0,0.08);
overflow-y: auto; display: none; flex-direction: column;
font-size: 12px; z-index: 10;
@ -290,7 +293,7 @@ const styles = css`
.settings-open .body { display: none !important; }
.settings-open .results-drawer { display: none !important; }
.settings-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #94a3b8; margin-bottom: 6px; }
.settings-input { width: 100%; box-sizing: border-box; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px 10px; font-size: 12px; outline: none; }
.settings-input { width: 100%; box-sizing: border-box; border: 1px solid var(--rs-input-border, #e2e8f0); border-radius: 6px; padding: 6px 10px; font-size: 12px; outline: none; background: var(--rs-input-bg, #fff); color: var(--rs-input-text, inherit); }
.settings-input:focus { border-color: #059669; }
.settings-item { display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.settings-item input[type="text"] { flex: 1; border: 1px solid #e2e8f0; border-radius: 4px; padding: 4px 6px; font-size: 11px; outline: none; min-width: 0; }

15
lib/folk-choice-vote.ts
View File

@ -6,7 +6,8 @@ const USER_NAME_KEY = "folk-choice-username";
const styles = css`
:host {
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, #1e293b);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-width: 320px;
@ -213,11 +214,13 @@ const styles = css`
.add-input {
flex: 1;
border: 1px solid #e2e8f0;
border: 1px solid var(--rs-input-border, #e2e8f0);
border-radius: 6px;
padding: 6px 10px;
font-size: 12px;
outline: none;
background: var(--rs-input-bg, #fff);
color: var(--rs-input-text, inherit);
}
.add-input:focus { border-color: #0d9488; }
@ -247,11 +250,13 @@ const styles = css`
}
.username-input {
border: 1px solid #e2e8f0;
border: 1px solid var(--rs-input-border, #e2e8f0);
border-radius: 6px;
padding: 8px 12px;
font-size: 13px;
outline: none;
background: var(--rs-input-bg, #fff);
color: var(--rs-input-text, inherit);
width: 100%;
box-sizing: border-box;
margin-bottom: 8px;
@ -271,7 +276,7 @@ const styles = css`
.wrapper { position: relative; height: 100%; }
.results-drawer {
position: absolute; top: 0; left: 100%; width: 300px; height: 100%;
background: white; border-radius: 0 8px 8px 0;
background: var(--rs-bg-surface, #fff); border-radius: 0 8px 8px 0;
box-shadow: 4px 0 12px rgba(0,0,0,0.08);
overflow-y: auto; display: none; flex-direction: column;
font-size: 12px; z-index: 10;
@ -299,7 +304,7 @@ const styles = css`
.settings-open .body { display: none !important; }
.settings-open .results-drawer { display: none !important; }
.settings-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #94a3b8; margin-bottom: 6px; }
.settings-input { width: 100%; box-sizing: border-box; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px 10px; font-size: 12px; outline: none; }
.settings-input { width: 100%; box-sizing: border-box; border: 1px solid var(--rs-input-border, #e2e8f0); border-radius: 6px; padding: 6px 10px; font-size: 12px; outline: none; background: var(--rs-input-bg, #fff); color: var(--rs-input-text, inherit); }
.settings-input:focus { border-color: #0d9488; }
.settings-item { display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.settings-item input[type="text"] { flex: 1; border: 1px solid #e2e8f0; border-radius: 4px; padding: 4px 6px; font-size: 11px; outline: none; min-width: 0; }

3
lib/folk-destination.ts
View File

@ -3,7 +3,8 @@ import { css, html } from "./tags";
const styles = css`
:host {
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, #1e293b);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-width: 260px;

3
lib/folk-drawfast.ts
View File

@ -3,7 +3,8 @@ import { css, html } from "./tags";
const styles = css`
:host {
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, #1e293b);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-width: 360px;

7
lib/folk-embed.ts
View File

@ -3,7 +3,8 @@ import { css, html } from "./tags";
const styles = css`
:host {
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, #1e293b);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-width: 300px;
@ -74,10 +75,12 @@ const styles = css`
width: 100%;
max-width: 400px;
padding: 12px 16px;
border: 2px solid #e2e8f0;
border: 2px solid var(--rs-input-border, #e2e8f0);
border-radius: 8px;
font-size: 14px;
outline: none;
background: var(--rs-input-bg, #fff);
color: var(--rs-input-text, inherit);
}
.url-input:focus {

3
lib/folk-freecad.ts
View File

@ -3,7 +3,8 @@ import { css, html } from "./tags";
const styles = css`
:host {
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, #1e293b);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-width: 360px;

3
lib/folk-google-item.ts
View File

@ -13,7 +13,8 @@ const SERVICE_ICONS: Record<GoogleService, string> = {
const styles = css`
:host {
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, #1e293b);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-width: 180px;

9
lib/folk-image-gen.ts
View File

@ -3,7 +3,8 @@ import { css, html } from "./tags";
const styles = css`
:host {
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, #1e293b);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-width: 320px;
@ -57,18 +58,20 @@ const styles = css`
.prompt-area {
padding: 12px;
border-bottom: 1px solid #e2e8f0;
border-bottom: 1px solid var(--rs-border, #e2e8f0);
}
.prompt-input {
width: 100%;
padding: 10px 12px;
border: 2px solid #e2e8f0;
border: 2px solid var(--rs-input-border, #e2e8f0);
border-radius: 8px;
font-size: 13px;
resize: none;
outline: none;
font-family: inherit;
background: var(--rs-input-bg, #fff);
color: var(--rs-input-text, inherit);
}
.prompt-input:focus {

3
lib/folk-image-studio.ts
View File

@ -3,7 +3,8 @@ import { css, html } from "./tags";
const styles = css`
:host {
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, #1e293b);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-width: 420px;

7
lib/folk-itinerary.ts
View File

@ -3,7 +3,8 @@ import { css, html } from "./tags";
const styles = css`
:host {
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, #1e293b);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-width: 300px;
@ -127,10 +128,12 @@ const styles = css`
.add-form input {
width: 100%;
padding: 6px 8px;
border: 1px solid #e2e8f0;
border: 1px solid var(--rs-input-border, #e2e8f0);
border-radius: 4px;
font-size: 12px;
outline: none;
background: var(--rs-input-bg, #fff);
color: var(--rs-input-text, inherit);
}
.add-form input:focus {

3
lib/folk-kicad.ts
View File

@ -3,7 +3,8 @@ import { css, html } from "./tags";
const styles = css`
:host {
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, #1e293b);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-width: 380px;

3
lib/folk-map.ts
View File

@ -26,7 +26,8 @@ const DEFAULT_STYLE = {
const styles = css`
:host {
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, #1e293b);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-width: 400px;

3
lib/folk-markdown.ts
View File

@ -4,7 +4,8 @@ import { SpeechDictation } from "./speech-dictation";
const styles = css`
:host {
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, #1e293b);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-width: 80px;

3
lib/folk-obs-note.ts
View File

@ -3,7 +3,8 @@ import { css, html } from "./tags";
const styles = css`
:host {
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, #1e293b);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-width: 350px;

3
lib/folk-packing-list.ts
View File

@ -3,7 +3,8 @@ import { css, html } from "./tags";
const styles = css`
:host {
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, #1e293b);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-width: 260px;

22
lib/folk-prompt.ts
View File

@ -4,7 +4,8 @@ import { SpeechDictation } from "./speech-dictation";
const styles = css`
:host {
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, #1e293b);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-width: 400px;
@ -82,13 +83,13 @@ const styles = css`
.message.assistant {
align-self: flex-start;
background: #f1f5f9;
color: #1e293b;
background: var(--rs-bg-surface-sunken, #f1f5f9);
color: var(--rs-text-primary, #1e293b);
border-bottom-left-radius: 4px;
}
.message.streaming {
background: #f1f5f9;
background: var(--rs-bg-surface-sunken, #f1f5f9);
}
.message.streaming::after {
@ -107,7 +108,7 @@ const styles = css`
flex-direction: column;
align-items: center;
justify-content: center;
color: #94a3b8;
color: var(--rs-text-muted, #94a3b8);
text-align: center;
gap: 8px;
padding: 24px;
@ -120,7 +121,7 @@ const styles = css`
.input-area {
padding: 12px;
border-top: 1px solid #e2e8f0;
border-top: 1px solid var(--rs-border, #e2e8f0);
display: flex;
flex-direction: column;
gap: 8px;
@ -128,10 +129,11 @@ const styles = css`
.model-select {
padding: 6px 10px;
border: 2px solid #e2e8f0;
border: 2px solid var(--rs-input-border, #e2e8f0);
border-radius: 6px;
font-size: 12px;
background: white;
background: var(--rs-input-bg, #fff);
color: var(--rs-input-text, inherit);
cursor: pointer;
width: fit-content;
}
@ -144,12 +146,14 @@ const styles = css`
.prompt-input {
flex: 1;
padding: 10px 14px;
border: 2px solid #e2e8f0;
border: 2px solid var(--rs-input-border, #e2e8f0);
border-radius: 8px;
font-size: 13px;
resize: none;
outline: none;
font-family: inherit;
background: var(--rs-input-bg, #fff);
color: var(--rs-input-text, inherit);
}
.prompt-input:focus {

4
lib/folk-slide.ts
View File

@ -26,8 +26,8 @@ const styles = css`
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
font-weight: 600;
color: #64748b;
background: white;
color: var(--rs-text-secondary, #64748b);
background: var(--rs-bg-surface, #fff);
padding: 2px 8px;
border-radius: 4px;
}

3
lib/folk-social-post.ts
View File

@ -3,7 +3,8 @@ import { css, html } from "./tags";
const styles = css`
:host {
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, #1e293b);
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
min-width: 280px;

3
lib/folk-token-ledger.ts
View File

@ -3,7 +3,8 @@ import { css, html } from "./tags";
const styles = css`
:host {
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, #1e293b);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-width: 320px;

3
lib/folk-token-mint.ts
View File

@ -3,7 +3,8 @@ import { css, html } from "./tags";
const styles = css`
:host {
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, #1e293b);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-width: 280px;

3
lib/folk-transcription.ts
View File

@ -4,7 +4,8 @@ import { SpeechDictation } from "./speech-dictation";
const styles = css`
:host {
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, #1e293b);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-width: 350px;

7
lib/folk-video-gen.ts
View File

@ -3,7 +3,8 @@ import { css, html } from "./tags";
const styles = css`
:host {
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, #1e293b);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-width: 400px;
@ -124,9 +125,11 @@ const styles = css`
.prompt-input {
width: 100%;
padding: 10px 12px;
border: 2px solid #e2e8f0;
border: 2px solid var(--rs-input-border, #e2e8f0);
border-radius: 8px;
font-size: 13px;
background: var(--rs-input-bg, #fff);
color: var(--rs-input-text, inherit);
resize: none;
outline: none;
font-family: inherit;

3
lib/folk-workflow-block.ts
View File

@ -3,7 +3,8 @@ import { css, html } from "./tags";
const styles = css`
:host {
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, #1e293b);
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
min-width: 200px;

12
lib/folk-wrapper.ts
View File

@ -3,7 +3,8 @@ import { css, html } from "./tags";
const styles = css`
:host {
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, #1e293b);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
min-width: 80px;
@ -109,13 +110,13 @@ const styles = css`
.tags {
padding: 8px 12px;
border-top: 1px solid #e0e0e0;
border-top: 1px solid var(--rs-border, #e0e0e0);
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
min-height: 32px;
background: #f8f9fa;
background: var(--rs-bg-surface-sunken, #f8f9fa);
flex-shrink: 0;
}
@ -168,14 +169,15 @@ const styles = css`
}
.tag-input {
border: 1px solid #9ca3af;
border: 1px solid var(--rs-input-border, #9ca3af);
border-radius: 12px;
padding: 2px 6px;
font-size: 10px;
outline: none;
min-width: 60px;
flex: 1;
background: white;
background: var(--rs-input-bg, #fff);
color: var(--rs-input-text, inherit);
}
`;

53
lib/folk-zine-gen.ts
View File

@ -3,7 +3,8 @@ import { css, html } from "./tags";
const styles = css`
:host {
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, #1e293b);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-width: 480px;
@ -66,18 +67,20 @@ const styles = css`
.ideation h3 {
margin: 0;
font-size: 14px;
color: #1e293b;
color: var(--rs-text-primary, #1e293b);
}
.topic-input {
width: 100%;
padding: 10px 12px;
border: 2px solid #e2e8f0;
border: 2px solid var(--rs-input-border, #e2e8f0);
border-radius: 8px;
font-size: 13px;
resize: none;
outline: none;
font-family: inherit;
background: var(--rs-input-bg, #fff);
color: var(--rs-input-text, inherit);
}
.topic-input:focus {
@ -91,10 +94,11 @@ const styles = css`
select {
padding: 6px 10px;
border: 2px solid #e2e8f0;
border: 2px solid var(--rs-input-border, #e2e8f0);
border-radius: 6px;
font-size: 12px;
background: white;
background: var(--rs-input-bg, #fff);
color: var(--rs-input-text, inherit);
cursor: pointer;
flex: 1;
}
@ -127,21 +131,22 @@ const styles = css`
align-items: center;
justify-content: space-between;
padding: 8px 12px;
border-bottom: 1px solid #e2e8f0;
border-bottom: 1px solid var(--rs-border, #e2e8f0);
font-size: 12px;
color: #64748b;
color: var(--rs-text-secondary, #64748b);
}
.page-nav button {
padding: 4px 10px;
border: 1px solid #e2e8f0;
border: 1px solid var(--rs-border, #e2e8f0);
border-radius: 4px;
background: white;
background: var(--rs-bg-surface, #fff);
color: var(--rs-text-primary, inherit);
cursor: pointer;
font-size: 12px;
}
.page-nav button:hover { background: #f1f5f9; }
.page-nav button:hover { background: var(--rs-bg-hover, #f1f5f9); }
.page-nav button:disabled { opacity: 0.3; cursor: not-allowed; }
.page-dots {
@ -178,7 +183,7 @@ const styles = css`
.section {
position: relative;
margin-bottom: 12px;
border: 1px solid #e2e8f0;
border: 1px solid var(--rs-border, #e2e8f0);
border-radius: 8px;
overflow: hidden;
transition: border-color 0.2s;
@ -193,10 +198,10 @@ const styles = css`
align-items: center;
justify-content: space-between;
padding: 4px 8px;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
background: var(--rs-bg-surface-sunken, #f8fafc);
border-bottom: 1px solid var(--rs-border, #e2e8f0);
font-size: 10px;
color: #94a3b8;
color: var(--rs-text-muted, #94a3b8);
text-transform: uppercase;
letter-spacing: 0.5px;
}
@ -213,12 +218,12 @@ const styles = css`
cursor: pointer;
font-size: 11px;
border-radius: 3px;
color: #64748b;
color: var(--rs-text-secondary, #64748b);
}
.section-actions button:hover {
background: #e2e8f0;
color: #1e293b;
background: var(--rs-bg-hover, #e2e8f0);
color: var(--rs-text-primary, #1e293b);
}
.section-body {
@ -232,7 +237,7 @@ const styles = css`
font-family: inherit;
font-size: 13px;
line-height: 1.5;
color: #1e293b;
color: var(--rs-text-primary, #1e293b);
background: transparent;
resize: none;
min-height: 24px;
@ -247,14 +252,14 @@ const styles = css`
.section-text.subhead {
font-size: 14px;
font-weight: 500;
color: #475569;
color: var(--rs-text-secondary, #475569);
}
.section-text.pullquote {
font-style: italic;
border-left: 3px solid #f59e0b;
padding-left: 10px;
color: #64748b;
color: var(--rs-text-secondary, #64748b);
}
.section-image {
@ -268,9 +273,9 @@ const styles = css`
align-items: center;
justify-content: center;
height: 120px;
background: #f1f5f9;
background: var(--rs-bg-surface-sunken, #f1f5f9);
border-radius: 4px;
color: #94a3b8;
color: var(--rs-text-muted, #94a3b8);
font-size: 12px;
}
@ -286,11 +291,13 @@ const styles = css`
.feedback-input {
flex: 1;
padding: 6px 8px;
border: 1px solid #fde68a;
border: 1px solid var(--rs-input-border, #fde68a);
border-radius: 4px;
font-size: 11px;
outline: none;
font-family: inherit;
background: var(--rs-input-bg, #fff);
color: var(--rs-input-text, inherit);
}
.feedback-input:focus { border-color: #f59e0b; }

73
modules/rcal/components/folk-calendar-view.ts
View File

@ -139,6 +139,14 @@ class FolkCalendarView extends HTMLElement {
private _transitionActive = false;
private viewVariant = 0;
// Gesture state (pan/swipe + pinch-to-zoom)
private _pointerCache: PointerEvent[] = [];
private _panStartX: number | null = null;
private _panStartY: number | null = null;
private _initialPinchDist: number | null = null;
private _gestureMode: 'none' | 'pan' | 'pinch' = 'none';
private _gestureFired = false;
// Leaflet map (preserved across re-renders)
private leafletMap: any = null;
private mapContainer: HTMLDivElement | null = null;
@ -168,6 +176,10 @@ class FolkCalendarView extends HTMLElement {
this.boundKeyHandler = null;
}
if (this._wheelTimer) { clearTimeout(this._wheelTimer); this._wheelTimer = null; }
this._pointerCache = [];
this._panStartX = this._panStartY = this._initialPinchDist = null;
this._gestureMode = 'none';
this._gestureFired = false;
if (this.leafletMap) {
this.leafletMap.remove();
this.leafletMap = null;
@ -1736,6 +1748,65 @@ class FolkCalendarView extends HTMLElement {
this._wheelTimer = null;
}, 120);
}, { passive: false });
// Pan/swipe + pinch-to-zoom on calendar pane
calPane.addEventListener("pointerdown", (e: PointerEvent) => {
const mapPanel = this.shadow.getElementById("map-panel");
if (mapPanel && mapPanel.contains(e.target as Node)) return;
this._pointerCache.push(e);
if (this._pointerCache.length === 1) {
this._panStartX = e.clientX;
this._panStartY = e.clientY;
this._gestureMode = 'none';
this._gestureFired = false;
} else if (this._pointerCache.length === 2) {
this._gestureMode = 'pinch';
this._gestureFired = false;
const dx = this._pointerCache[0].clientX - this._pointerCache[1].clientX;
const dy = this._pointerCache[0].clientY - this._pointerCache[1].clientY;
this._initialPinchDist = Math.hypot(dx, dy);
}
});
calPane.addEventListener("pointermove", (e: PointerEvent) => {
// Update pointer in cache
const idx = this._pointerCache.findIndex(p => p.pointerId === e.pointerId);
if (idx < 0) return;
this._pointerCache[idx] = e;
if (this._gestureMode === 'pinch' && this._pointerCache.length === 2 && this._initialPinchDist && !this._gestureFired) {
const dx = this._pointerCache[0].clientX - this._pointerCache[1].clientX;
const dy = this._pointerCache[0].clientY - this._pointerCache[1].clientY;
const dist = Math.hypot(dx, dy);
const ratio = dist / this._initialPinchDist;
if (ratio > 1.3) { this._gestureFired = true; this.zoomIn(); }
else if (ratio < 0.7) { this._gestureFired = true; this.zoomOut(); }
return;
}
// Single-pointer pan
if (this._pointerCache.length === 1 && this._panStartX !== null && this._panStartY !== null && !this._gestureFired) {
const dx = e.clientX - this._panStartX;
const dy = e.clientY - this._panStartY;
// Only trigger if horizontal movement dominates
if (Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy) * 1.5) {
this._gestureFired = true;
this._gestureMode = 'pan';
this.navigate(dx < 0 ? 1 : -1);
}
}
});
const pointerEnd = (e: PointerEvent) => {
this._pointerCache = this._pointerCache.filter(p => p.pointerId !== e.pointerId);
if (this._pointerCache.length === 0) {
this._panStartX = this._panStartY = this._initialPinchDist = null;
this._gestureMode = 'none';
this._gestureFired = false;
}
};
calPane.addEventListener("pointerup", pointerEnd);
calPane.addEventListener("pointercancel", pointerEnd);
}
}
@ -1906,7 +1977,7 @@ class FolkCalendarView extends HTMLElement {
/* ── Main Layout ── */
.main-layout { position: relative; min-height: 400px; }
.main-layout--docked { display: grid; grid-template-columns: 1fr 400px; gap: 8px; min-height: 500px; }
.calendar-pane { overflow: auto; min-width: 0; }
.calendar-pane { overflow: auto; min-width: 0; touch-action: pan-y; user-select: none; }
/* ── Map Panel ── */
.map-panel { background: var(--rs-bg-surface-sunken); border: 1px solid var(--rs-border-strong); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }

2
modules/rflows/components/flows.css
View File

@ -283,7 +283,7 @@
/* HTML card nodes (foreignObject) */
.node-card {
background: white; border-radius: 12px; overflow: hidden;
background: var(--rs-bg-surface, #fff); color: var(--rs-text-primary, #1e293b); border-radius: 12px; overflow: hidden;
font-family: system-ui, -apple-system, sans-serif;
height: 100%; box-sizing: border-box;
}

2
modules/rsocials/components/folk-campaign-manager.ts
View File

@ -131,7 +131,7 @@ export class FolkCampaignManager extends HTMLElement {
</div>
</div>
<div class="actions">
<a href="/rsocials/thread-editor" class="btn btn--outline">Open Thread Builder</a>
<a href="/rsocials/thread-editor" class="btn btn--outline">Open Thread Editor</a>
<button class="btn btn--primary" id="import-md-btn">Import from Markdown</button>
</div>
${phaseHTML}

2
modules/rsocials/components/folk-campaign-planner.ts
View File

@ -738,7 +738,7 @@ class FolkCampaignPlanner extends HTMLElement {
<option value="ready" ${d.status === 'ready' ? 'selected' : ''}>Ready</option>
<option value="published" ${d.status === 'published' ? 'selected' : ''}>Published</option>
</select>
<button class="cp-btn" data-action="open-thread" style="margin-top:8px;width:100%">Open in Thread Builder</button>
<button class="cp-btn" data-action="open-thread" style="margin-top:8px;width:100%">Open in Thread Editor</button>
</div>`;
break;
}

2
modules/rsocials/components/folk-thread-builder.ts
View File

@ -307,7 +307,7 @@ export class FolkThreadBuilder extends HTMLElement {
<style>${this.getBaseStyles()}${this.getEditorStyles()}</style>
<div class="thread-page">
<div class="page-header">
<h1>Thread Builder</h1>
<h1>Thread Editor</h1>
<div class="page-actions">
<button class="btn btn--primary" id="thread-save">Save Draft</button>
<button class="btn btn--success" id="thread-share">Share</button>

69
modules/rsocials/components/folk-thread-gallery.ts
View File

@ -2,7 +2,7 @@
* <folk-thread-gallery> — Thread listing grid with cards.
*
* Subscribes to Automerge doc and renders all threads sorted by updatedAt.
* Falls back to demo data when space=demo.
* Falls back to static demo previews when offline runtime is unavailable.
*/
import { socialsSchema, socialsDocId } from '../schemas';
@ -14,6 +14,7 @@ export class FolkThreadGallery extends HTMLElement {
private _space = 'demo';
private _threads: ThreadData[] = [];
private _offlineUnsub: (() => void) | null = null;
private _isDemoFallback = false;
static get observedAttributes() { return ['space']; }
@ -21,11 +22,7 @@ export class FolkThreadGallery extends HTMLElement {
if (!this.shadowRoot) this.attachShadow({ mode: 'open' });
this._space = this.getAttribute('space') || 'demo';
this.render();
if (this._space === 'demo') {
this.loadDemoData();
} else {
this.subscribeOffline();
}
this.subscribeOffline();
}
disconnectedCallback() {
@ -38,8 +35,16 @@ export class FolkThreadGallery extends HTMLElement {
}
private async subscribeOffline() {
const runtime = (window as any).__rspaceOfflineRuntime;
if (!runtime?.isInitialized) return;
let runtime = (window as any).__rspaceOfflineRuntime;
if (!runtime) {
await new Promise(r => setTimeout(r, 200));
runtime = (window as any).__rspaceOfflineRuntime;
}
if (!runtime) { this.loadDemoFallback(); return; }
if (!runtime.isInitialized && runtime.init) {
try { await runtime.init(); } catch { /* already init'd */ }
}
if (!runtime.isInitialized) { this.loadDemoFallback(); return; }
try {
const docId = socialsDocId(this._space) as DocumentId;
@ -50,40 +55,33 @@ export class FolkThreadGallery extends HTMLElement {
this.renderFromDoc(updated);
});
} catch {
// Runtime unavailable
this.loadDemoFallback();
}
}
private loadDemoFallback() {
if (this._threads.length > 0) return; // already have data
// No runtime available — show static demo content (not editable)
this._threads = DEMO_FEED.slice(0, 3).map((item, i) => ({
id: `demo-${i}`,
name: item.username.replace('@', ''),
handle: item.username,
title: item.content.substring(0, 60),
tweets: [item.content],
createdAt: Date.now() - (i + 1) * 86400000,
updatedAt: Date.now() - i * 3600000,
}));
this._isDemoFallback = true;
this.render();
}
private renderFromDoc(doc: SocialsDoc) {
if (!doc?.threads) return;
this._isDemoFallback = false;
this._threads = Object.values(doc.threads).sort((a, b) => b.updatedAt - a.updatedAt);
this.render();
}
private loadDemoData() {
this._threads = [
{
id: 'demo-1', name: 'Alice', handle: '@alice',
title: 'Building local-first apps with rSpace',
tweets: ['Just deployed the new rFlows river view! The enoughness score is such a powerful concept.', 'The key insight: local-first means your data is always available, even offline.', 'And with Automerge, real-time sync just works. No conflict resolution needed.'],
createdAt: Date.now() - 86400000, updatedAt: Date.now() - 3600000,
},
{
id: 'demo-2', name: 'Bob', handle: '@bob',
title: 'Why cosmolocal production matters',
tweets: ['The cosmolocal print network now has 6 providers across 4 countries.', 'Design global, manufacture local — this is the future of sustainable production.'],
createdAt: Date.now() - 172800000, updatedAt: Date.now() - 86400000,
},
{
id: 'demo-3', name: 'Carol', handle: '@carol',
title: 'Governance lessons from Elinor Ostrom',
tweets: ['Reading "Governing the Commons" — so many parallels to what we\'re building.', 'Ostrom\'s 8 principles for managing commons map perfectly to DAO governance.', 'The key: graduated sanctions and local monitoring. Not one-size-fits-all.'],
createdAt: Date.now() - 259200000, updatedAt: Date.now() - 172800000,
},
];
this.render();
}
private esc(s: string): string {
return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}
@ -106,7 +104,10 @@ export class FolkThreadGallery extends HTMLElement {
const imageTag = t.imageUrl
? `<div class="card__image"><img src="${this.esc(t.imageUrl)}" alt="" loading="lazy"></div>`
: '';
return `<a href="/rsocials/thread/${this.esc(t.id)}" class="card">
const href = this._isDemoFallback
? `/rsocials/thread-editor`
: `/rsocials/thread-editor/${this.esc(t.id)}/edit`;
return `<a href="${href}" class="card">
${imageTag}
<h3 class="card__title">${this.esc(t.title || 'Untitled Thread')}</h3>
<p class="card__preview">${preview}</p>

4
modules/rsocials/mod.ts
View File

@ -136,9 +136,9 @@ function seedTemplateSocials(space: string): void {
id: threadId,
name: "rSocials",
handle: "@rsocials",
title: "Welcome to Thread Builder",
title: "Welcome to Thread Editor",
tweets: [
"Welcome to the rSocials Thread Builder! Write your thread content here, separated by --- between tweets.",
"Welcome to the rSocials Thread Editor! Write your thread content here, separated by --- between tweets.",
"Each section becomes a separate tweet card with live character counts and thread numbering.",
"When you're ready, export to Twitter, Bluesky, Mastodon, or LinkedIn. All locally stored, no third-party data mining.",
],